html5 canvas behavior when canvas size is modified

Question

When I modify HTML5 Canvas size, and draw next text, the aspect ratio of the text is skewed. I do not expect this behavior. What am I doing wrong?

<!DOCTYPE HTML>
<html>  
    <script src="jquery-ui/js/jquery-1.9.1.js"></script>    
    <style> canvas{border:1px solid green}  </style>

    <body>  
    <canvas id="myCanvas" width="300" height="200"></canvas>    

    <script>    
    var canvas = document.getElementById('myCanvas');
    var context = canvas.getContext('2d');
    var height=200; 

    var myVar=setInterval(function(){repeat()},1000);

    function repeat(){      
        $('#myCanvas').css("height",height+=50);
        $('#myCanvas').css("width",300);
        // var canvas = document.getElementById('myCanvas');
        // var context = canvas.getContext('2d');   
        context.font = 'italic 40pt Calibri';
        context.fillText("Super test", 40, 100);        
    }
    </script>

enter image description here

http://stackoverflow.com/questions/2588181/canvas-is-stretched-when-using-css-but-normal-with-width-height-properties — Andreas, May 19 '13 at 14:15

score 0 · Answer 1 · answered May 19 '13 at 14:44

using canvas.setAttribute('height', h); instead of $('#myCanvas').css("height",h); ...

<!DOCTYPE HTML>
<html>  
    <script src="jquery-ui/js/jquery-1.9.1.js"></script>    
    <style> canvas{border:1px solid green}  </style>

    <body>  
    <canvas id="myCanvas" width="300" height="200"></canvas>    

    <script>    
    var canvas = document.getElementById('myCanvas');
    var context = canvas.getContext('2d');
    var height=200; 

    var myVar=setInterval(function(){repeat()},1000);

    function repeat(){      
        canvas.setAttribute('height', height+=50);

        context.font = 'italic 40pt Calibri';
        context.fillText("Super test", 40, 100);        
    }
    </script>

html5 canvas behavior when canvas size is modified

1 Answers1