HTML5 में drawImage() मेथड से इमेज कैसे ड्रॉ करें?

Canvas drawImage() मेथड

HTML5 Canvas API का drawImage() मेथड इमेज, कैनवास या वीडियो को कैनवास पर ड्रॉ करता है। इमेज के भाग भी ड्रॉ कर सकते हैं और आकार बदल सकते हैं।

पैरामीटर्स:

उदाहरण (एनिमेटेड पैटर्न)

<!DOCTYPE HTML> <html>
  <head>
    <script type="text/javascript">
      var pattern = new Image();
      function animate() {
        pattern.src = '/html5/images/pattern.jpg';
        setInterval(drawShape, 100);
      }
      function drawShape() {
        var canvas = document.getElementById('newCanvas');
        if (canvas.getContext) {
          var ctx = canvas.getContext('2d');
          ctx.fillStyle = 'rgba(0,0,0,0.4)';
          ctx.strokeStyle = 'rgba(0,153,255,0.4)';
          ctx.save();
          ctx.translate(150,150);
          var time = new Date();
          ctx.rotate( ((2*Math.PI)/6)*time.getSeconds() + ((2*Math.PI)/6000)*time.getMilliseconds() );
          ctx.translate(0,28.5);
          ctx.drawImage(pattern,-3.5,-3.5);
          ctx.restore();
        } else {
          alert('You need Safari or Firefox 1.5+ to see this demo.');
        }
      }
    </script>
  </head>
  <body onload="animate();">
    <canvas id="newCanvas" width="400" height="400"></canvas>
  </body>
</html>