- 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