- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
HTML5 Canvas distorted
If the canvas looks distorted, then try to change the height and width −
<canvas id = ”canvas1” width = '400' height = '300'></canvas>
The default height and width of the canvas in HTML5 is of 2/1 ratio −
width = 300 height = 150
Example
Let us see an example −
<!DOCTYPE HTML>
<html>
<head>
<style>
#mycanvas{border:1px solid red;}
</style>
</head>
<body>
<canvas id = "mycanvas" width = "100" height = "100"></canvas>
</body>
</html>Output
- Related Articles
- Translating HTML5 canvas
- HTML5 Canvas Transformation
- HTML5 Canvas Transformation Matrix
- HTML5 Canvas Circle Text
- HTML5 Canvas Degree Symbol
- HTML5 Canvas Font Size Based on Canvas Size
- HTML5 Canvas to PNG File
- Display video inside HTML5 canvas
- Perform basic HTML5 Canvas animation
- HTML5 Canvas fit to window
- Drop Shadow with HTML5 Canvas
- UIWebView HTML5 Canvas & Retina Display
- Composition attribute in HTML5 Canvas?
- Circle Collision Detection HTML5 Canvas
- Print a HTML5 canvas element
Advertisements