Menu
I'm drawing simple lines with the HTML5 canvas:
context = $('canvas')[0].getContext('2d');
context.moveTo(150, 20);
context.lineTo(300, 20);
context.stroke();
When my canvas CSS changes from:
canvas {
width: 500px;
height: 500px;
}
to
canvas {
width: 1000px;
height: 1000px;
}
the stroke width and height also double! What gives?
852
By default, the browser creates canvas elements with a width of 300 pixels and a height of 150 pixels. You can change the size of a canvas element by specifying the width and height attributes.
In the Properties panel, you can input canvas size width and height at specific values. Use the Units property to change the canvas size units between pixels, inches, or centimeters. Use the Resolution setting to set a print resolution in pixels/inch or pixels/centimeter.
Every digital image contains a specific number of pixels, and the size of your canvas is literally just picking how many pixels you want to start with. The bigger your image, the more detail you can add, and the larger you can print.
The HTML <canvas> element is used to draw graphics, on the fly, via scripting (usually JavaScript). The <canvas> element is only a container for graphics. You must use a script to actually draw the graphics. Canvas has several methods for drawing paths, boxes, circles, text, and adding images.
The CSS only determines its visible size. Change the width and height attributes in the HTML to adjust the actual number of pixels that make it up. If in the HTML it is 100x100, and in the CSS 200x200, it will be visually scaled by 2X.
185
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
