Menu
I'm trying to allow the user to draw a rectangle on the canvas (like a selection box). I'm getting some ridiculous results, but then I noticed that even just trying the code from my reference here, I get huge fuzzy lines and don't know why.
it's hosted at dylanstestserver.com/drawcss. the javascript is inline so you can check it out. I am using jQuery to simplify getting the mouse coordinates.
906
The stroke() method of the HTML canvas is used to draw the path. This path is drawn with moveTo() and lineTo() method. The <canvas> element allows you to draw graphics on a web page using JavaScript. Every canvas has two elements that describes the height and width of the canvas i.e. height and width respectively.
However, the Canvas still looks pixelated. This is because the Canvas is rendering to a bitmap of one size then scaling the bitmap to fit the CSS dimensions. To fix this, we modify the Canvas's bitmap dimensions to match the CSS dimensions using JavaScript.
The stroke and fill determines how the shape is drawn. The stroke is the outline of a shape. The fill is the contents inside the shape.
The blurry problem will happen if you use css to set the canvas height and width instead of setting height and width in the canvas element.
<style> canvas { height: 800px; width: 1200px; } WRONG WAY -- BLURRY LINES </style> <canvas height="800" width="1200"></canvas> RIGHT WAY -- SHARP LINES If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
