Resize HTML 5 canvas and its contents in pure Javascript

Question

I would like to implement the zoom function in my web application in order to resize the canvas and its content proportionally (I don't care about dirty quality).

Here is my code. It resets the canvas every time we want to zoom in to get an image object (to use the drawImage method), resize the canvas, and then use the drawImage method to proportionally change the content ...

var Editor = { // The following variables contains informations // about the original canvas data: ..., // imageData width: 200, height: 50, // Zoom canvas zoomCanvas: function(zoom){ // zoom in percents var canvas = $('#canvas').get(0); var context = canvas.getContext(); var data = this.data; var scale = zoom / 100; var width = this.width * scale; var height = this.height * scale; // Reset canvas to original size and imageData this.resizeCanvas(this.width, this.height); context.scale(1, 1); context.putImageData(data, 0, 0); // Get Image from original canvas data var url = canvas.toDataURL(); var img = $('<img src="' + url + '">').get(0); // Resize canvas, apply scale and draw Image with new proportions this.resizeCanvas(width, height); context.scale(scale, scale); context.drawImage(img, 0, 0); }, // Resize canvas resizeCanvas: function(width, height){ // NOTE : I don't know exactly how to resize it so... var canvas = $('#canvas').get(0); canvas.width = width; canvas.height = height; $(canvas).width(width).attr('width', width); $(canvas).height(height).attr('height', height); var context = canvas.getContext('2d'); context.width = width; context.height = height; } } 

It works for Zoom +, but not for Zoom -.

In any case, I don’t think this is the best way to do what I expect, it would be better to find a way to work directly from Editor.data, without having to reset the canvas every time or saving the Image Object. Also, I'm not sure about using the scaling method ...

Any help would be appreciated

(Sorry for my English)

Answer 1

Try using <input type="range"> , transform: scale (sx [, SY])

 var canvas = document.querySelectorAll("canvas")[0] , scale = document.getElementById("scale"); scale.addEventListener("change", function(e) { canvas.style.transform = "scale(" + e.target.value + "," + e.target.value + ")" }) 

 body { height:800px; } canvas { background:blue; position:relative; display:block; } #scale { position:relative; display:inline-block; padding:8px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <input id="scale" type="range" min="0" max="2" step="0.1" value=""/><br /><br /><br /><br /><br /><br /><br /> <canvas width="200" height="200"></canvas><br />