Languages

Menu
Sites
Language
How to resize a canvas using javascript.

in html page

<canvas id="box2" style="border:1px solid red;position:absolute;width: 50%;height: 50%;left:15%;top:8%;background-size:100% 100%;"></canvas>


this is canvas then i want to resize using javascript in tizen using only %.how to resize.

 

this is my jquery function.

 $("#backgrd1").click(function() {
        var tmp = document.getElementById('box2');
      


    });

 

View Selected Answer
List

Responses

3 Replies
daniel kim

Hi,

I think that you can resize canvas like as below code. 

 <canvas id="myCanvas" width="200" height="100"  style="border:1px solid #000000;"></canvas>

<script>
var elem = document.getElementById('myCanvas'),
    updateSizes = function() {
    perH = 80; //80%
    perW = 50; //50%
    elem.height = window.innerHeight * 0.01 * perH;
    elem.width =  window.innerWidth * 0.01 * perW;
    console.log("height"+ elem.height);
    console.log("width"+   elem.width);
};

elem.addEventListener('click', function(event) {
     console.log("clicked");
     updateSizes();
}, false);

</script>

Hope this will help you.

Mark as answer
Palitsyna

Hello,

you can resize a canvas using this code: 

    $("#button").click(function() {
        var tmp = document.getElementById('box2');
        tmp.style.width = "15%";
        tmp.style.height = "15%";
    });

 

ashish kumar

Hi, Palitsyna thank's