Clock Canvas Demo

HTML5 canvas demos

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
    <title>Canvas xcxcxcxcxcxcc</title>
    
    <style type="text/css">
      canvas { border: 1px solid black; }
    </style>
  </head>
  <body onload="draw();">
    <canvas id="tutorial" width="150" height="150"></canvas>
  </body>
  <img id="scream" width="220" height="277" src="https://www.roomsketcher.com/wp-content/uploads/2017/08/RoomSketcher-Custom-2D-Floor-Plan-Branding.jpg" alt="The Scream" />
</html>

JavaScript

function draw() {
        var canvas = document.getElementById('tutorial');
        if (canvas.getContext) {
          var ctx = canvas.getContext('2d');
           var img = document.getElementById("scream");
    ctx.drawImage(img, 10, 10);
    }