StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POHTML5 responsive canvas: resizing the browser canvas draw disappear
text
Body
copied!<p>I want to make a responsive canvas using size in percentage and once user will resize the window the canvas adjust relatively. I am able to scale the canvas by using below code but the only problem is as i scale the window size the mouse drawing disappear.</p> <pre><code><style> body{margin:0px;padding:0px;background:#a9a9a9;} #main{ display:block; width:80%; padding:50px 10%; height:300px; } canvas{display:block;background:#fff;} </style> </head> <body> <div id="main" role="main"> <canvas id="paint" width="100" height="100"> < !-- Provide fallback --> </canvas> </div> <script> var c = document.getElementById('paint'); var ctx = c.getContext('2d'); var x = null; var y; c.onmousedown = function(e){ x = e.pageX - c.offsetLeft; y = e.pageY - c.offsetTop; ctx.beginPath(); ctx.moveTo(x,y); } c.onmouseup = function(e){ x=null; } c.onmousemove = function(e){ if(x==null) return; x = e.pageX - c.offsetLeft; y = e.pageY - c.offsetTop; ctx.lineTo(x,y); ctx.stroke(); } $(document).ready( function(){ //Get the canvas & var c = $('#paint'); var container = $(c).parent(); //Run function when browser resizes $(window).resize( respondCanvas ); function respondCanvas(){ c.attr('width', $(container).width() ); //max width c.attr('height', $(container).height() ); //max height //Call a function to redraw other content (texts, images etc) } //Initial call respondCanvas(); }); </script> </code></pre> <p>Thanks.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload