<h1>Canvas</h1>
<canvas id="mycanvas" width="800" height="1000">
  Canvasに対応したブラウザを使って下さい。
</canvas>

window.onload = function(){
  draw();
}

function draw() {
  var canvas = document.getElementById('mycanvas');
  if (!canvas || !canvas.getContext){
    return false;
  }
  var ctx = canvas.getContext('2d');
  strokeFill_1(ctx);
  styleWidthJoin_2(ctx);
  gradient_3(ctx);
  shadowAlpha_4(ctx);
  transform_5(ctx);
  drawLine_6(ctx);
  arc_7(ctx);
  text_8(ctx);
}

/*1. strokeRect, fillRect*/
function strokeFill_1(ctx){
  ctx.save();
  ctx.strokeRect(0, 0, 50, 50);
  /*塗りつぶし 四角*/
  ctx.fillRect(100, 0, 50, 50);

  /* 四角を消しゴムのように消す　切り抜き */
  ctx.fillRect(200, 0, 50, 50);
  ctx.clearRect(205, 5, 20, 20);
  ctx.restore();
}

/*2.strokeStyle, lineWidth, linJoin*/
function styleWidthJoin_2(ctx) {
  ctx.save();
  //カラー
  ctx.strokeStyle = 'rgba(0,0,255,0.7)';
  //線の幅
  ctx.lineWidth = 15;
  ctx.lineJoin = 'miter';
  ctx.strokeRect(10, 100, 50, 50);
  
  /*角のスタイル変更*/
  /*丸める*/
  ctx.lineJoin = 'round';
  ctx.strokeRect(100, 100, 50, 50);
  
  /*面どり*/
  ctx.lineJoin = 'bevel';
  ctx.strokeRect(200, 100, 50, 50);
  
  //塗りつぶし
  ctx.fillStyle = 'rgba(255, 0, 0, 0.7)';
  ctx.fillRect(300, 100, 50, 50);
  
  ctx.restore();
}

/*3.gradient*/
function gradient_3(ctx){
  ctx.save();
  var x = 0;
  var y = 200;
  var w = 100;
  var g = ctx.createLinearGradient(x, y, x+w, y+w);
  g.addColorStop(0.0, "red");
  g.addColorStop(0.5, "yellow");/*中間地点*/
  g.addColorStop(1.0, "blue");
  ctx.fillStyle = g;
  /*塗りつぶし 四角*/
  ctx.fillRect(x, y, w, w);
  
  /*円形グラ
  始点 x, y, 半径, 終点 x, y, 半径
  */
  var g_r = ctx.createRadialGradient(x+150+w/2, y+w/2, 20, x+150+w/2, y+w/2, 60);
  g_r.addColorStop(0.0, "red");
  g_r.addColorStop(0.5, "yellow");/*中間地点*/
  g_r.addColorStop(1.0, "blue");
  ctx.fillStyle = g_r;
  ctx.fillRect(x+150, y, w, w);
  ctx.restore();
}

/*4. 影 透明度 */
function shadowAlpha_4(ctx){
  ctx.save();
  var w = 50;
  //影
  ctx.shadowColor = '#ccc';
  ctx.shadowOffsetX = 10;
  ctx.shadowOffsetY = 10;
  ctx.shadowBlur = 2;/*ぼかし具合*/
  ctx.fillRect(0, 350, w, w);
  
  /*全体の透明度*/
  ctx.globalAlpha = 0.5;
  ctx.fillRect(100, 350, w, w);
 
  ctx.restore();
}

/* 5. transform*/
function transform_5(ctx){
  ctx.save();
  
  var w = 50;
  var y = 450;
  ctx.fillRect(0, y, w, w);
  
  //拡大・縮小
  ctx.translate(100, y);
  ctx.scale(0.8, 0.8);
  ctx.fillRect(0, 0, w, w);

  ctx.restore();
  ctx.save();
  
  //回転 radian
  ctx.translate(200, y);
  ctx.rotate(30 * Math.PI / 180);
  ctx.fillRect(0, 0, w, w);
  
  ctx.restore();
}

/* 6. beginPath */
function drawLine_6(ctx) {
  ctx.save();
  var x = 20;
  var y = 550;
  ctx.beginPath();
  //始点
  ctx.moveTo(x, y);
  ctx.lineTo(x+50, y);
  ctx.lineTo(x+50, y+50);
  //描画
  ctx.stroke();
  
  x += 100;
  ctx.beginPath();
  ctx.moveTo(x, y);
  ctx.lineTo(x+50, y);
  ctx.lineTo(x+50, y+50);
  //終点 始点と結ぶ
  ctx.closePath();
  //描画
  ctx.stroke();
  
  x += 100;
  ctx.beginPath();
  //始点
  ctx.moveTo(x, y);
  ctx.lineTo(x+50, y);
  ctx.lineTo(x+50, y+50);
  ctx.closePath();
  //中身を塗る
  ctx.fill();
  //描画
  ctx.stroke();
  
  ctx.restore();
}

/* 7.arc */
function arc_7(ctx){
  ctx.save();
  var x = 30;
  var y = 650;
  var r = 25;
  
  ctx.beginPath();
  /*始点x, y, 半径, 角度1, 2 */
  ctx.arc(x, y, r, deg2rad(10), deg2rad(210));
  ctx.stroke();
  
  x += 100;
  //正円
  ctx.beginPath();
  /*始点x, y, 半径, 角度1, 2 */
  ctx.arc(x, y, r, deg2rad(0), deg2rad(360));
  ctx.stroke();
  
  x += 100;
  ctx.beginPath();
  /*始点x, y, 半径, 角度1, 2 */
  ctx.arc(x, y, r, deg2rad(0), deg2rad(270));
  //塗りつぶし
  ctx.fill();
  
  x += 100;
  ctx.beginPath();
  /*始点x, y, 半径, 角度1, 2 */
  ctx.arc(x, y, r, deg2rad(0), deg2rad(270));
  ctx.lineWidth = 15;
  ctx.lineCap = 'butt';
  //塗りつぶし
  ctx.stroke();
  
  x += 100;
  ctx.beginPath();
  /*始点x, y, 半径, 角度1, 2 */
  ctx.arc(x, y, r, deg2rad(0), deg2rad(270));
  ctx.lineWidth = 15;
  ctx.lineCap = 'round';//終端のスタイル
  //塗りつぶし
  ctx.stroke();
  
  x += 100;
    ctx.beginPath();
  /*始点x, y, 半径, 角度1, 2 */
  ctx.arc(x, y, r, deg2rad(0), deg2rad(270));
  ctx.lineWidth = 15;
  ctx.lineCap = 'square';//終端のスタイル
  //塗りつぶし
  ctx.stroke();
  
  ctx.resore();
}

function deg2rad(deg){
  return(deg * Math.PI / 180);
}