title: html5 canvas redraw on resize
body: <p>I have two canvas elements and need them to be resized on buttons click.</p>
  
  <pre><code>&lt;div class="sDetails"&gt;&lt;div&gt;
                          &lt;div id="canvasDiv" style="width: 310px;"&gt;&lt;canvas id="canvasGraph"&gt;&lt;/canvas&gt;&lt;/div&gt;&lt;/div&gt;
  &lt;div class="kDetails"&gt;&lt;div&gt;&lt;div&gt;
  &lt;div id="canvasDiv" style="width: 310px; height: 240px;"&gt;&lt;canvas id="canvasGraph"&gt;&lt;/canvas&gt;&lt;/div&gt;&lt;/div&gt;
  </code></pre>
  
  <p>and the script:</p>
  
  <pre><code>   var sketch;var sketch_sl;var onPaint;var canvas=null;var ctx=null;var tmp_ctx=null;
      function drawCanvas(div) {
          canvas = document.querySelector(div + " #canvasGraph");
          ctx = canvas.getContext('2d');
          sketch = document.querySelector(div + " #canvasDiv");
          sketch_sl = getComputedStyle(sketch);
          canvas.width = parseInt(sketch_style.getPropertyValue('width'));
          canvas.height = parseInt(sketch_style.getPropertyValue('height'));
          tmp_canvas = document.createElement('canvas');
          tmp_ctx = tmp_canvas.getContext('2d');
          tmp_canvas.id = 'tmp_canvas';
          tmp_canvas.width = canvas.width;
          tmp_canvas.height = canvas.height;
          sketch.appendChild(tmp_canvas);
  </code></pre>
  
  <p>the redraw function:</p>
  
  <pre><code>// here I must redraw my lines resized 2 times ( *cScale ) where cScale=2 or =1
  function drawScales(ctx, canvas) 
          ctx.strokeStyle = 'green';
          ctx.fillStyle = 'green';
          ctx.beginPath();
          ctx.moveTo(5, 0);
          ctx.lineTo(0, canvas.height);
          scaleStep = 24*cScale;
  </code></pre>
  
  <p>for some reason it works really bad, old positions stay.
  Is there a way to completely delete the whole canvas and append it or redraw it completely?</p>
  
  <p>I tried <code>canvas.width=canvas.width</code>, tried <code>ctx.clearRect(0, 0, canvas.width, canvas.height);tmp_ctx.clearRect(0, 0, canvas.width, canvas.height);</code>, tried <code>$(".sDetails #canvasGraph")[0].reset();</code></p>
  
  <p>logically, <code>drawCanvas(".sDetails");drawLines(ctx, canvas);</code> should redraw it from scratch but it will not.</p>