Resize html5 canvas with shape drawn on cnvas

Question

I have drawn shape on html5 canvas with some hardcoded pixels. now I want to resize the drwan shape on resizing the canvas width and height.here is my code:

                      var canvas  = document.getElementById("myCanvas");
          var context = canvas.getContext("2d");

                        context.moveTo(232, 158);
                        context.lineTo(314, 145);
                        context.lineTo(382, 134);
                        context.lineTo(491, 144);
                        context.lineTo(576, 154);
                        context.lineTo(512,170);
                        context.quadraticCurveTo(404, 152, 352, 160);
                        context.lineTo(304,168);
                        //context.stroke();
                        context.closePath();
                        context.fillStyle = xx_Lpattern;
                        context.fill();

                        context.beginPath();

                        context.moveTo(576, 154);
                        context.lineTo(670, 163);
                        context.lineTo(751, 174);
                        context.lineTo(748,236);
                        context.lineTo(606, 216);
                        context.quadraticCurveTo(705, 188, 576, 179);
                        context.lineTo(512,170)
                        //context.stroke();
                        context.closePath();
                        context.fillStyle = xx_Lpattern;
                        context.fill();

After resizing canvas size shape size should also get change (here I want to minimize the canvas size to size 500x300) .

You may need one of the suggestions from [html5 canvas vector graphics](http://stackoverflow.com/questions/4340040/html5-canvas-vector-graphics), or redraw the shape yourself after resizing the canvas. — Jeroen, May 29 '12 at 14:33

score 5 · Accepted Answer · answered May 30 '12 at 11:42

You should use transformation matrix. Here is a tutorial https://developer.mozilla.org/en/Canvas_tutorial/Transformations

scale(x, y)

this is the function you need. Here a JSFiddle with your code example

http://jsfiddle.net/peRxy/1/

code :

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var resizeFactor = 2;

drawMyWeirdShape();
canvas.width *= resizeFactor;
canvas.height *= resizeFactor;
context.scale(resizeFactor ,resizeFactor );
drawMyWeirdShape();


function drawMyWeirdShape() {
    // this is your code for drawing your weird shape
    context.moveTo(232, 158);
    context.lineTo(314, 145);
    context.lineTo(382, 134);
    context.lineTo(491, 144);
    context.lineTo(576, 154);
    context.lineTo(512, 170);
    context.quadraticCurveTo(404, 152, 352, 160);
    context.lineTo(304, 168);
    context.stroke();
    context.closePath();
    context.fill();

    context.beginPath();

    context.moveTo(576, 154);
    context.lineTo(670, 163);
    context.lineTo(751, 174);
    context.lineTo(748, 236);
    context.lineTo(606, 216);
    context.quadraticCurveTo(705, 188, 576, 179);
    context.lineTo(512, 170)
    context.stroke();
    context.closePath();
    context.fill();
}

Resize html5 canvas with shape drawn on cnvas

1 Answers1