Gecko [ fernandoquevedodop.com ]

Name	Size	Permission
arc.html	883 B	-rw-r--r--
clearpath.html	942 B	-rw-r--r--
drawimage.html	574 B	-rw-r--r--
gradient.html	810 B	-rw-r--r--
gradient2.html	874 B	-rw-r--r--
linewidth.html	887 B	-rw-r--r--
overflow.html	687 B	-rw-r--r--
quadraticcurve.html	1.03 KB	-rw-r--r--
resizing.html	1.52 KB	-rw-r--r--
saverestorepath.html	858 B	-rw-r--r--
stroke-scale-rotate.html	1.3 KB	-rw-r--r--
stroke-should-not-close-path.h...	629 B	-rw-r--r--

Code Editor : resizing.html

<html>
<head>
  <title>ExplorerCanvas Text Case</title>
  
  <script>
    // Safari is known not to handle resizing well, expect this to
    // compare to Firefox

var cv, ctx, size = 80;
    var img = new Image();
    img.src = "../examples/ff.jpg";

function a() {
      cv = document.getElementById("aa");
      ctx = cv.getContext("2d");

l();
    }

function l() {
      size = (size + 1) % 800;
      cv.width = Number(size + 200);
      cv.height = Number((size + 200) / 2);

// Firefox autoclears the canvas at this point

ctx.save();
      ctx.translate(50, 50);
      ctx.scale(0.1, 0.1);
      ctx.rotate(size/800 * Math.PI*8);
      ctx.drawImage(img, 0, -75);
      ctx.restore();

ctx.save();
      ctx.beginPath();
      ctx.moveTo(0, 0);
      ctx.lineTo(cv.width, cv.height);
      ctx.moveTo(20, 20);
      ctx.lineTo(80, 20);
      ctx.lineTo(80, 80);
      ctx.lineTo(20, 80);
      ctx.stroke();
      ctx.closePath();
      ctx.restore();

ctx.save();
      ctx.beginPath();
      ctx.scale(size / 200, size / 200);
      ctx.arc(100, 50, 20, 0, Math.PI, true);
      ctx.fill();
      ctx.restore();

setTimeout(l, 50);
    }
  </script>
  <style>
    canvas {
      background-color:#eee;
    }
  </style>
</head>
<body onload="a();">
<canvas id="aa" width="200" height="200">Fallback <b>content</b> markup</canvas>
</body>
</html>

${this.title}

Code Editor : resizing.html