Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE HTML>
<html>
    <head>
        <style>
            body {
                margin: 0px;
                padding: 0px;
            }
            
            #myCanvas {
                border: 1px solid #9C9898;
            }
        </style>
        <script>
            window.onload = function(){
                var canvas = document.getElementById("myCanvas");
                var context = canvas.getContext("2d");
                var destX = 69;
                var destY = 50;
                var imageObj = new Image();
                
                imageObj.onload = function(){
                  context.drawImage(imageObj, destX, destY);
                  // Comment line above and try these :
                  
                  // Draw with a different target size
                  // context.drawImage(imageObj, destX, destY, 100, 100);
                  
                  // Draw subpart of source + resize
                  //context.drawImage(imageObj,destX, destY, 200,200, 200, 200, 150, 150);
                };
              imageObj.src = "http://www.html5canvastutorials.com/demos/tutorials/html5_canvas_images/darth-vader.jpg";
            };
        </script>
    </head>
    <body onmousedown="return false;">
        <canvas id="myCanvas" width="578" height="400">
        </canvas>
    </body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers