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.

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();
    }

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.

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();
    }

• javascript
• html
• canvas

2 Answers 2

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).

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.

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

http://paperjs/

"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?