You must set the width and height when using the <canvas> element, specifying the size of the area that can be painted. But there is a small problem when setting the width and height here.
Sample code:
<!DOCTYPE HTML><HTML><Head><MetaCharSet= "Utf-8"/> <title>Canvas Drawing</title> </Head><Body><CanvasID= "Drawimg"width= "+"Height= "$">A drawimg of something.</Canvas></Body> <Script>vardrawimg=document.getElementById ("drawimg");if(drawimg.getcontext) {varContext=Drawimg.getcontext ("2d"); Context.strokerect (0, 0, -, -); Context.fillrect (Wuyi, 0, -, -);}</Script></HTML>
Here I set the size of the painting area directly within the <canvas> tag. The effect shown in the browser is this
Now I'm not setting the width height inside the label.
<!DOCTYPE HTML><HTML><Head><MetaCharSet= "Utf-8"/> <title>Canvas Drawing</title>
<style type= "Text/css" >#drawimg {width:300px; height:500px; }
</style></Head><Body><CanvasID= "Drawimg" >A drawimg of something.</Canvas></Body> <Script>vardrawimg=document.getElementById ("drawimg");if(drawimg.getcontext) {varContext=Drawimg.getcontext ("2d"); Context.strokerect (0, 0, -, -); Context.fillrect (Wuyi, 0, -, -);}</Script></HTML>
This is how the browser displays the effect.
As a result, the width is the same as the rectangle, the height is obviously elongated. What is this for?
In fact <canvas> has its own default width height 300px*150px, and defining width in <canvas>, height is different from defining width and height in style ,< The width and height of the canvas> tag are the actual widths and heights of the painting area, and the drawing is on top of it. The width and height of the style are the height and width that <canvas> is rendered in the browser. If the width and height of <canvas> are not specified or the value is incorrect, it is set to the default value {width:300px,height:150px}.
This explains why the second notation causes the drawing to be stretched, the size of the paint area is not defined in <canvas>, so the default {width:300px,height:150px} is set, and the <style> is set to {width : 300px;height:500px;} Stretches the height of the painting area.
<canvas> setting wide-height problems
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
