10

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?

atp
  • 30,132
  • 47
  • 125
  • 187

1 Answers1

20

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.

Andrea
  • 19,134
  • 4
  • 43
  • 65