Question

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?

Answer 1

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 100×100, and in the CSS 200×200, it will be visually scaled by 2X.