Canvas drawing gets distorted when resizing canvas

Question

I'm implementing drawing on canvas with html5 and javascript.

If I dont set canvas width and height manually ( leave it default) , my drawing works good.

However, when I set canvas size either from css or javascript, my drawing looks like distorted. The line starts drawing little bit away from the line, and the line looks distorted.

Distorted image

Here is the code for mousedown event.

if (mouseDown)
    {
        previousX = currentX;
        previousY = currentY;
        currentX = e.clientX - canvas.offsetLeft;
        currentY = e.clientY - canvas.offsetTop;
        ctx.beginPath();
        ctx.moveTo(previousX, previousY);
        ctx.lineTo(currentX, currentY);
        ctx.strokeStyle = color;
        ctx.lineWidth = y;
        ctx.stroke();
        ctx.closePath();
    }

score 7 · Accepted Answer · 2015-03-09T12:08:19.797

7

You must set the size of canvas using its correct properties/attributes.

Canvas is an element with a bitmap. If you use CSS or style you will only scale the element, not the bitmap. The result is a blurry image.

Set correct size by doing this (and CSS is not necessary normally):

<canvas width=800 height=800></canvas>

or in JavaScript:

canvas.width = 800;    // example size
canvas.height = 800;

If you use CSS, either using a rule or the style attribute in the element, to scale the canvas you will only scale a 300x150 pixel bitmap to something else which will give bad quality. Always scale the bitmap and then redraw (as the canvas will be cleared).

edited Mar 09 '15 at 12:08

answered Mar 09 '15 at 11:58

This works, thanks! But also, using this, if i scroll down on canvas(when canvas doesnt fit screen), mouse gets away from line when drawing.. – n32303 Mar 09 '15 at 12:11
1

Why don't you open a new question? – shmuli Mar 09 '15 at 12:11

score 3 · Answer 2 · edited May 23 '17 at 12:28

3

The canvas API is only for drawing in raster. That's why it doesn't retain clarity when it resizes. It's to be expected.

If you'd want to produce vector, you'd have to use SVG (Scalable Vector Graphics) instead. But the SVG doesn't support drawing. Producing SVG is basically through XML, so it's not flexible the same way as the canvas API is.

enter image description here

Here's a library that will help you accomplish drawing to the canvas in vector:

http://paperjs.org/

"Paper.js is an open source vector graphics scripting framework that runs on top of the HTML5 Canvas."

Here's another thread which enumerates more options:

HTML5 Canvas Vector Graphics?

edited May 23 '17 at 12:28

Community

1
1

answered Mar 09 '15 at 11:26

shmuli

5,086
4
32
64

Hm yes, but isnt it weird that you can only draw on default size canvas in html5, and cannot select your own... – n32303 Mar 09 '15 at 11:31
@NejcLovrencic Check post. I added a library that will help you write to the canvas in vector. Please upvote and mark correct if this helps you. – shmuli Mar 09 '15 at 11:34
@NejcLovrencic I'm not sure what you mean. You can set the canvas size to whatever you want. – shmuli Mar 09 '15 at 11:39
well I cant.. when I change it and start to draw on it, everything looks distorted.. – n32303 Mar 09 '15 at 11:44
If you set the size with a % it does distored, if you set it in px it does not – dwana Mar 09 '15 at 11:45
I recommend you look at the paperjs library I mentioned in my answer. That'll resolve this. – shmuli Mar 09 '15 at 11:46
@NejcLovrencic Did you look at the library I posted? – shmuli Mar 09 '15 at 11:56
1

@shmuli this is only correct if you have to use the same bitmap for scaling. If you can redraw, as with canvas, there is no difference. SVG also need to be rasterized to be shown on screen. Canvas also uses paths just like SVG with the exception of drawing images or video (same limitation applies to SVG for embedded bitmaps/images). Besides from that, it is a problem of how the developer handles this, not the canvas. My 2 cents.. – Mar 09 '15 at 12:00
@KenFyrstenberg So basically, if I understood you correctly, you would just "redraw" the canvas onto the screen whenever you make size changes. – shmuli Mar 09 '15 at 12:04
2

@shmuli you have to redraw canvas when it changes size cause it will be cleared. OP doesn't show his setup code here though, but he is probably scaling the default 300x150 to something using CSS which means the bitmap of canvas is scaled. He need to use width/height properties and then redraw (points can be stored in an array etc.). – Mar 09 '15 at 12:06

Canvas drawing gets distorted when resizing canvas

2 Answers2