<!DOCTYPE HTML>
<html>
 <head></head>
 <body>
  <canvas id="myCanvas1" width="200" height="100" style="border:1px solid #c3c3c3;">
  </canvas>
  <script type="text/javascript">
    var c = document.getElementById("myCanvas1");
    var cxt = c.getContext("2d");
    cxt.fillStyle="#FFFF00";
    cxt.beginPath();
    cxt.arc(70,18,15,0,Math.PI*2,false);
    cxt.closePath();
    cxt.fill();
  </script>
 </body>
</html>

------====================-----------==================------------=======

<!DOCTYPE HTML>
<html>
 <head></head>
 <body background="#000000">
  <DIV background="#000000">
  <canvas id="myCanvas2" width="200" height="80" style="border:1px solid #c3c3c3;">
  </canvas>
  <video width="200" height="40"></video>
  </DIV>
  
  <video width="200" height="40"></video>
 </body>
 <script type="text/javascript">
  var c = document.getElementById("myCanvas2");
  var cxt = c.getContext("2d");
  var grd = cxt.createLinearGradient(0,0,100,50);
  grd.addColorStop(0,"#FFFFFF");
  grd.addColorStop(1,"#CCCCCC");
  cxt.fillStyle=grd;
  cxt.fillRect(0,0,100,50);
 </script>
</html>
 

----------------------==========================---------------------------

 

<!DOCTYPE HTML>
<html>
 <head></head>
 <body background="#000000">
  <DIV background="#000000">
  <canvas id="myCanvas2" width="500" height="333" style="border:1px solid #c3c3c3;">
  </canvas>
  
  </DIV>
  
 </body>
 <script type="text/javascript">
  var c = document.getElementById("myCanvas2");
  var cxt = c.getContext("2d");
  var img = new Image();
  img.src = "W1380.jpg";
  cxt.drawImage(img,0,0);
 </script>
</html>