Dynamically resize canvas window with javascript/jquery?

How can I resize a canvas with javascript/jquery?

Resizing using the css function and applying it to the canvas element just stretches the content as if you were stretching an image.

How would I go about doing this without the stretching?


Make a function that does the drawing, then re-draw whenever something changes that requires it (like a page resize, etc). Try it out

Make sure you set the context.canvas.width/height, not CSS width/height. Also note that setting the size clears the canvas.

How I would write it:

    var c = $("#canvas"), 
        ctx = c[0].getContext('2d');

    var draw = function(){
        ctx.fillStyle = "#000";

        // set width and height
         ctx.canvas.height = 600;
         ctx.canvas.width = 600;
        // draw

        // wait 2 seconds, repeate same process
            ctx.canvas.height = 400;
            ctx.canvas.width = 400;
        }, 2000)

 (function($) {  
            //Let the user resize the canvas to the size he/she wants  
            resizeCanvas:  function(w, h) {  
                var c = $(this)[0]  
                c.width = w;  
                c.height = h  

Use this little function I created to take care of resizing on the go. Use it this way —

$("the canvas element id/class").resizeCanvas(desired width, desired height)

Whenever the browser is resized, the following solution resizes the dimensions of the canvas based on the dimensions of the window by creating an initial ratio.

Jsfiddle: http://jsfiddle.net/h6c3rxxf/9/

Note: The canvas needs to be re-drawn, when it is resized.


<canvas id="myCanvas" width="300" height="300" >


canvas {
    border: 1px dotted black;
    background: blue;


(function() {
    // get the precentage of height and width  of the cavas based on the height and width of the window
    getPercentageOfWindow = function() {
        var viewportSize = getViewportSize();
        var canvasSize = getCanvastSize();
        return {
            x: canvasSize.width / (viewportSize.width - 10),
            y: canvasSize.height / (viewportSize.height - 10)
    //get the context of the canvas 
    getCanvasContext = function() {
        return $("#myCanvas")[0].getContext('2d');
    // get viewport size
    getViewportSize = function() {
        return {
            height: window.innerHeight,
            width: window.innerWidth
    // get canvas size
    getCanvastSize = function() {
        var ctx = getCanvasContext();
        return {
            height: ctx.canvas.height,
            width: ctx.canvas.width
    // update canvas size
    updateSizes = function() {
        var viewportSize = getViewportSize();
        var ctx = getCanvasContext();
        ctx.canvas.height = viewportSize.height * percentage.y;
        ctx.canvas.width = viewportSize.width * percentage.x;
    var percentage = getPercentageOfWindow();
    $(window).on('resize', function() {

The answers/resolutions are collected from stackoverflow, are licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0 .
Read More:   How to ISO 8601 format a Date with Timezone Offset in JavaScript?

Similar Posts