Source Code:
(back to article)
Submit
Result:
Report an issue
<!DOCTYPE html> <html> <head> <title>Title of the document</title> </head> <body> <div> <h2>Original image</h2> <img id="flower" src="https://images.unsplash.com/photo-1485431142439-206ba3a9383e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" width="500" height="379"> </div> <h2>Draw an image with canvas</h2> <canvas id="exampleCanvas"></canvas> <script> const canvas = document.getElementById('exampleCanvas'); const ctx = canvas.getContext('2d'); const image = document.getElementById('flower'); image.addEventListener('load', e => { ctx.drawImage(image, 80, 80, 350, 200, 10, 10, 150, 100); }); </script> </body> </html>