resize HTML5 canvas

Question

I am using an html canvas element to draw some data as a chart.

I have 4 canvases on one page with a chart in each of them.

When the user clicks on a chart I want to enlarge the chart.

For the smaller charts, my code is as follows: <canvas width='350' height='200' ></canvas>

For the larger charts, I rebuild the same chart with the following attributes: <canvas width='700' height='350' ></canvas>

I have tried:

onclick - redraw the entire chart with new values in the height and width attributes.
onclick - redraw the entire chart with new values in the css styles height and width.
onclick - redraw the entire chart with new values in both attributes and css styles.

I am getting very unexpected results such as a blank chart, or bigger canvas but the proportions are way off.

Some code would help to see what you are attempting. To zoom in you could use the scale method. Check out [transformations](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Transformations) — jing3142, Sep 30 '13 at 16:54
A canvas is a pixel matrix. What should happen if you increase the size of your canvas by 50%? There is no such thing as 1.5px wide line, so what should the browser do? That's why nothing happens. It's the programmer that should handle such cases. So either adjust what's drawn on the canvas (scale and redraw) or, maybe, as a poor man's solution, use css3 zoom: http://stackoverflow.com/questions/13393588/complete-styles-for-cross-browser-css-zoom — Sergiu Paraschiv, Sep 30 '13 at 17:01

score 4 · Accepted Answer · answered Sep 30 '13 at 19:15

Save the starting canvas dimensions:

var canvasWidth=canvas.width;
var canvasHeight=canvas.height;

To enlarge:

canvas.width=canvasWidth*1.5;
canvas.height=canvasHeight*1.5;
context.scale(1.5,1.5);
// And now redraw your chart normally
// It will be 50% larger

To reduce back to starting dimensions:

canvas.width=canvasWidth;
canvas.height=canvasHeight;
context.scale(1,1);
// And now redraw your chart normally
// It will be back to the starting dimensions

Then when the canvas is clicked, toggle the dimensions between larger and starting sizes.

Joe Marie · Answer 2 · 2013-09-30T19:38:50.380

is this what you want? i made a jsfiddle check it here http://jsfiddle.net/NDgMC/ , I just used :checked pseudo element in css and a checkbox

HTML code:

<input type="checkbox" class="toggle" name="ao-toggle" />
<canvas id="myCanvas"></canvas>

CSS code:

input.toggle{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    margin: 0;
    padding: 0;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
    z-index: 100;
    border: none;
    cursor: pointer;
}

input.toggle:checked + #myCanvas{
    border:1px solid #000000;
    background-color:#000;
    width:400px;
    height:200px;
    -webkit-transition:0.5s;
    transition:0.5s;
}

#myCanvas{
    border:1px solid #000000;
    background-color:#ccc;
    width:200px;
    height:100px;
    -webkit-transition:0.5s;
    transition:0.5s;
}

resize HTML5 canvas

2 Answers2