Canvas

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>Canvas</title>
  </head>
  <body>
    <h1>Canvas</h1>
    <canvas id="mycanvas" width="800" height="800">
    対応ブラウザを使用ください。</canvas>
    <p>
    </p>
  <script src="myscript.js"></script>
  </body>
</html>

window.onload = function(){
  draw();
}
function draw(){
  var canvas = document.getElementById('mycanvas');
  if (!canvas || !canvas.getContext)return false;
  var ctx = canvas.getContext('2d');

  //ctx.strokeRect(50, 10, 50, 150);
  ctx.fillRect(10, 10, 50, 50);
  ctx.clearRect(15, 15, 20, 20);
}

線の塗りやスタイル

  ctx.strokeStyle = "rgba(255, 0, 0, 0.5)";
  ctx.lineWidth = 15;
  ctx.lineJoin = "bevel";//"round";

  ctx.fillStyle = "rgba(255, 0, 0, 0.5)";
  ctx.strokeRect(10, 10, 50, 50);
  ctx.fillRect(100, 10, 50, 50);

%e7%84%a1%e9%a1%8c

  var g = ctx.createLinearGradient(0, 0, 0, 100);
  g.addColorStop(0.0, "red");
  g.addColorStop(0.5, "yellow");
  g.addColorStop(1.0, "blue");
  ctx.fillStyle = g;

  ctx.fillRect(0, 0, 100, 100);

円形
var g = ctx.createRadialGradient(50, 50, 0, 50, 50, 80);