Canvas 2Dリファレンス

トップ > HTMLリファレンス > Canvas 2Dリファレンス

目次

仕様書

Canvas 2D は下記の文書で公開されています。

サンプル

HTML
<!DOCTYPE html>
<html>
<head>
<title>CANVAS TEST</title>
<!--[if lt IE 9]>                               // Explorer Canvasを読み込む
<script src="js/excanvas.js"></script>
<![endif]-->
<script>
window.addEventListener('load', function() {
    var cv = document.getElementById('cv1');    // 要素を得る
    if (!cv) { return; }

    var ct = cv.getContext('2d');               // 2D(平面)コンテキストを得る
    if (!ct) { return; }

    ct.fillStyle = '#ffcccc';
    ct.fillRect(0, 0, cv.width, cv.height);     // 矩形を塗りつぶす

    ct.strokeStyle = '#ff0000';
    ct.strokeRect(0, 0, cv.width, cv.height);   // 矩形を描画する

    ct.beginPath();
    ct.strokeStyle = '#ff0000';
    ct.arc(70, 50, 40, 0, Math.PI * 2, false);  // 円を描画する
    ct.stroke();

    ct.beginPath();
    ct.strokeStyle = '#0000ff';
    ct.moveTo(0, 0);
    ct.lineTo(140, 100);                        // 線を描画する
    ct.stroke();
});
</script>
</head>
<body>
 <canvas id="cv1" width="140" height="100"></canvas>
</body>
</html>

コンテキスト

context.canvas

キャンバス要素を返します。

JavaScript
ct.canvas.style.height = "300px";

キャンバス状態の保存と取り出し

context.save()
context.restore()

save() は、現在の状態をスタックに格納します。状態は、変換マトリックス、クリップ領域、および strokeStyle, fillStyle, globalAlpha, lineWidth, lineCap, lineJoin, miterLimit, shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor, globalCompositeOperation, font, textAlign, textBaseline の状態を含みます。restore() は、スタックから最新のものをひとつ取り出し、現在の状態にリストアします。

JavaScript
ct.strokeStyle = '#ff0000';
ct.save();           // strokeStyle 等の状態がスタックに格納される
ct.strokeStyle = '#0000ff';
ct.beginPath();
ct.moveTo(0, 50);
ct.lineTo(300, 50);
ct.stroke();
ct.restore();        // strokeStyle 等の状態が元に戻される

ラインスタイル

context.lineWidth [= value]

線の幅を返却します。設定も可能です。初期値は 1.0 です。

JavaScript
ct.lineWidth = 8;
ct.beginPath();
ct.moveTo(20, 20);
ct.lineTo(280, 20);
ct.stroke();
Example
context.lineCap [= value]

線の両端の形状を返却します。設定も可能です。切れ端(butt), 角丸(round), 矩形(square) のいずれかを指定します。初期値は butt です。

Example
context.lineJoin [= value]

線の結合スタイルを返却します。設定も可能です。面取り(bevel), 角丸(round), 留め継ぎ(miter) のいずれかを指定します。初期値は miter です。

Example
context.miterLimit [= value]

線の中心が交わるポイントと、線の外側が交わるポイントとの距離をマイター長と呼びますが、liineJoin = "miter" で線を鋭角で結合すると、結合部(マイター長)が妙に長くなりすぎることがあります。このマイター長が、線の太さの miterLimit 倍を超えてしまう場合、線は miter ではなく、bevel で描画することでこの問題を防ぎます。miterLimit の初期値は 10.0 です。下記の例では、上の線には miterLimit = 100.0 を、下の線には miterLimit = 10.0 を指定しています。

Example
context.setLineDash(segments)
segments = context.getLineDash()

setLineDash() は点線の描画方法を指定します。segments に [ 20, 5, 10, 5 ] を指定すると、長さ 20 の実線、長さ 5 の空白、長さ 10 の実線、長さ 5 の空白を繰り返して点線を描画します。getLineDash() は、現在の点線描画のリストを配列で返却します。

Example
context.lineDashOffset [= value]

点線を描画する際の、始点のオフセットの長さを参照(指定)します。上のサンプルで lineDashOffset = 15 を指定すると、最初の線の長さ 20 の内、15 のオフセットを引いた長さ 5 で、最初の線を描画します。

Example

テキストスタイル

context.font [= value]

文字を描画する際のフォントを参照(設定)します。詳細は CSS の font を参照してください。

JavaScript
  ct.font = 'italic 9pt Arial';
context.textAlign [= value]

文字の表示位置を参照(指定)します。start, end, left, right, center のいずれかを指定します。初期値は start です。

JavaScript
  ct.textAlign = 'center';
context.textBaseline [= value]

文字のベースラインを参照(指定)します。top, hanging, middle, alphabetic, ideographic, bottom のいずれかを指定します。初期値は alphabetic です。

JavaScript
  ct.textBaseline = 'bottom';

ビルディングパス

context.moveTo(x, y)

新しいサブパスの始点を x, y で指定します。

JavaScript
  ct.moveTo(40, 40);
Example
context.lineTo(x, y)

現在の位置から x, y の位置まで線を描画します。

JavaScript
  ct.beginPath();
  ct.moveTo(40, 40);
  ct.lineTo(200, 40);
  ct.stroke();
Example
context.quadraticCurveTo(cpx, cpy, x, y)

現在の位置から、cpx, cpy を制御点、x, y を終点とする二次ベジェ曲線を描画します。

JavaScript
  ct.beginPath();
  ct.moveTo(50, 90);
  ct.quadraticCurveTo(100, 10, 150, 90);
  ct.stroke();
Example
context.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)

現在の位置から、(cp1x, cp1y), (cp2x, cp2y) を制御点、x, y を終点とする三次ベジェ曲線を描画します。

JavaScript
  ct.beginPath();
  ct.moveTo(50, 90);
  ct.bezierCurveTo(90, 10, 110, 10, 150, 90);
  ct.stroke();
Example
context.arcTo(x1, y1, x2, y2, radius)

現在の位置から、(x1, y1)を経由して (x2, y2) に向かう線を描画します。ただし、角を半径 radius の円弧とし、円弧の終点で終了します。

JavaScript
  ct.beginPath();
  ct.moveTo(50, 90);
  ct.arcTo(50, 10, 130, 10, 30);
  ct.stroke();
Example
context.arc(x, y, radius, startAngle, endAngle [, counterclockwise ] )

x, y を中心、radius を半径、startAngle を開始角、endAngle を終了角とする円弧を描画します。角度には 0 から Math.PI * 2 までの値を指定します。x 軸の方向が角度 0 となります。counterclockwisetrue を指定すると時計周りとなります。

JavaScript
  ct.beginPath();
  ct.arc(50, 50, 40, 0, (Math.PI * 2) * (3 / 4));
  ct.stroke();
Example
context.rect(x, y, w, h)

x, y を左上端とする、横幅 w、高さ h の矩形を描きます。

JavaScript
  ct.beginPath();
  ct.rect(20, 20, 100, 60);
  ct.stroke();
Example
context.ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle [, anticlockwise])

x, y を中心とし、radiusX, radiusY を半径とする楕円を描きます。rotaion は傾き角度、startAngle, endAngle は開始角度、終了角度、anticlockwise に true を指定すると半時計周りに描画します。

JavaScript
  ct.beginPath();
  ct.ellipse(100, 50, 60, 30, 0, 0, Math.PI * 2);
  ct.stroke();
Example
context.closePath()

現在のサブパスを閉じて、始点と終点を線で結びます。

JavaScript
  ct.beginPath();
  ct.moveTo(10, 10);
  ct.lineTo(10, 90);
  ct.lineTo(90, 90);
  ct.closePath();
  ct.stroke();
Example

トランスフォーメーション

context.scale(x, y)

現在の座標を、横に x 倍、縦に y 倍にスケール変更します。

JavaScript
  ct.beginPath();
  ct.rect(20, 20, 30, 30);
  ct.stroke();
  ct.scale(2.0, 2.0);
  ct.beginPath();
  ct.rect(50, 10, 30, 30);
  ct.stroke();
Example
context.rotate(angle)

現在の座標を、angle 度回転させます。

JavaScript
  ct.beginPath();
  ct.rect(40, 5, 60, 20);
  ct.stroke();
  ct.rotate(45 * Math.PI / 180);
  ct.beginPath();
  ct.rect(40, 5, 60, 20);
  ct.stroke();
Example
context.translate(x, y)

現在の座標を、右方向に x、下方向に y 分移動させます。

JavaScript
  ct.beginPath();
  ct.rect(20, 20, 60, 20);
  ct.stroke();
  ct.translate(100, 0);
  ct.beginPath();
  ct.rect(20, 20, 60, 20);
  ct.stroke();
Example
context.transform(x1, x2, y2, y1, x3, y3)
context.setTransform(x1, x2, y2, y1, x3, y3)

スケール変更、回転、座標シフトの座標変換をまとめて行います。現在の座標を、x1, y1 倍にスケール変更し、x2, y2 だけ回転し、x3, y3 分移動させます。transform()setTransform() を複数回呼び出した場合、transform() の場合は現在の座標に対してさらに座標変換を行います。setTransform() は初期座標に対して変換を行います。

JavaScript
  ct.beginPath();
  ct.rect(20, 20, 60, 20);
  ct.stroke();
  ct.transform(1.3, 10 * Math.PI / 180, 10 * Math.PI / 180, 1.3, 100, 0);
  ct.beginPath();
  ct.rect(20, 20, 60, 20);
  ct.stroke();
Example

フィル&ストロークスタイル

context.fillStyle [= value]

塗りつぶしの色を参照(設定)します。

JavaScript
  ct.beginPath();
  ct.fillStyle = "rgb(255, 120, 120)";
  ct.arc(50, 50, 30, 0, Math.PI * 2, 40);
  ct.fill();

  ct.beginPath();
  ct.fillStyle = "rgba(120, 120, 255, 0.4)";
  ct.arc(90, 50, 30, 0, Math.PI * 2, 40);
  ct.fill();
Example
context.strokeStyle [= value]

線の色を参照(設定)します。

JavaScript
  ct.lineWidth = 10;
  ct.beginPath();
  ct.strokeStyle = "rgb(255, 120, 120)";
  ct.arc(50, 50, 30, 0, Math.PI * 2, 40);
  ct.stroke();
  ct.beginPath();
  ct.strokeStyle = "rgba(120, 120, 255, 0.4)";
  ct.arc(90, 50, 30, 0, Math.PI * 2, 40);
  ct.stroke();
Example
gradient = context.createLinearGradient(x0, y0, x1, y1)
gradient.addColorStop(offset, color)

線形グラデーションを指定します。createLinearGradient() で (x0, y0) から (x1, y1) への線形の仮想線を引き、開始点を 0.0、終了点を 1.0 とし、addColorStop() でそれぞれのポイントの色を指定します。

JavaScript
  var gradient = ct.createLinearGradient(10, 10, 90, 90);
  gradient.addColorStop(0.0, 'rgb(255, 90, 90)');
  gradient.addColorStop(0.5, 'rgb(90, 255, 90)');
  gradient.addColorStop(1.0, 'rgb(90, 90, 255)');
  ct.beginPath();
  ct.fillStyle = gradient;
  ct.rect(10, 10, 80, 80);
  ct.fill();
Example
gradient = context.createRadialGradient(x0, y0, r0, x1, y1, r1)

円形グラデーションを指定します。createRadialGradient() で中心 (x0, y0)、半径 r0 の開始円、中心 (x1, y1)、半径 r1 の終了円を作成し、開始円を 0.0、終了円を 1.0 とし、addColorStop() でそれぞれの円弧の色を指定します。作成したグラデーションは fillStylestrokeStyle に設定します。

JavaScript
  var gradient = ct.createRadialGradient(40, 40, 0, 50, 50, 50);
  gradient.addColorStop(0.0, 'rgb(90, 90, 255)');
  gradient.addColorStop(0.5, 'rgb(90, 255, 90)');
  gradient.addColorStop(1.0, 'rgb(255, 90, 90)');
  ct.beginPath();
  ct.fillStyle = gradient;
  ct.arc(50, 50, 40, 0, Math.PI * 2);
  ct.fill();
Example
pattern = context.createPattern(image, repetition)

塗りつぶしに使用する画像を指定します。repetition には、繰り返し(repeat)、X方向のみ繰り返し(repeat-x)、Y方向のみ繰り返し(repeat-y)、繰り返さない(no-repeat) のいずれかを指定します。fillRecv() などの描画関数は、イメージの onload ハンドラの中に記述します。

JavaScript
  var img = new Image();
  img.src = './image/back.png?' + new Date().getTime();
  img.onload = function() {
    var pattern = ct.createPattern(img, 'repeat');
    ct.fillStyle = pattern;
    ct.fillRect(10, 10, 80, 80);
  };
Example

矩形描画

context.clearRect(x, y, w, h)

左上端を (x, y)、横幅 w、高さ h とする矩形領域をクリアします。

JavaScript
  ct.fillRect(10, 10, 80, 80);
  ct.clearRect(30, 30, 40, 40);
Example
context.fillRect(x, y, w, h)

左上端を (x, y)、横幅 w、高さ h とする矩形領域を fillStyle で指定した色で塗りつぶします。

JavaScript
  ct.fillStyle = 'rgb(160, 160, 255)';
  ct.fillRect(10, 10, 80, 80);
Example
context.strokeRect(x, y, w, h)

左上端を (x, y)、横幅 w、高さ h とする矩形を strokeStyle で指定した色で描画します。

JavaScript
  ct.strokeStyle = 'rgb(0, 0, 255)';
  ct.strokeRect(10, 10, 80, 80);
Example

テキスト描画

context.fillText(text, x, y [, maxWidth ] )

ベースラインの左端を (x, y) として、テキスト text を描画します。maxWidth は、最大の横幅を指定します。横幅を超える場合、テキストは横方向に圧縮されます。

JavaScript
  ct.font = "20pt Arial";
  ct.fillText("Hello world!!", 20, 60);
Example
context.strokeText(text, x, y [, maxWidth ] )

ベースラインの左端を (x, y) として、テキスト text を白抜きで描画します。maxWidth は、最大の横幅を指定します。横幅を超える場合、テキストは横方向に圧縮されます。

JavaScript
  ct.font = "20pt Arial";
  ct.strokeText("Hello world!!", 20, 60);
Example
metrics = context.measureText(text)
metrics.width

measureText()text のメトリック情報 metrics を返します。metrics.width はテキストの横幅を参照します。下記の例では、文字幅を計算し、矩形の中央に文字が表示されるように調整しています。

JavaScript
  ct.font = '12pt Arial';
  ct.strokeRect(10, 10, 220, 80);
  var text = "HTML5 Canvas Reference";
  var metrics = ct.measureText(text);
  ct.fillText(text, 120 - metrics.width / 2, 50);
Example

パス描画

context.beginPath()

新しいパスを始めるために、現在のパスをリセットします。

context.stroke()

現在の線引きスタイルで、現在のサブパスを描画します。

JavaScript
  ct.beginPath();
  ct.moveTo(30, 30); ct.lineTo(30, 70); ct.lineTo(70, 70);
  ct.moveTo(130, 30); ct.lineTo(130, 70); ct.lineTo(170, 70);
  ct.stroke();
Example
context.fill()

現在の塗りつぶしスタイルで、現在のサブパスを塗りつぶします。

JavaScript
  ct.beginPath();
  ct.moveTo(30, 30); ct.lineTo(30, 70); ct.lineTo(70, 70);
  ct.moveTo(130, 30); ct.lineTo(130, 70); ct.lineTo(170, 70);
  ct.fill();
Example
context.drawFocusIfNeeded(element)

element にフォーカスが当たっていれば、現在のパスの周りにフォーカスリングを描画します。

HTML
<canvas id="cv1" width="300" height="100">
  <input type="button" id="b1" value="B1">
</canvas>
JavaScript
  var cv = document.getElementById('cv1'); if (!cv) { return; }
  var ct = cv.getContext('2d'); if (!ct) { return; }
  var b1 = document.getElementById('b1');
  b1.focus();
  ct.beginPath();
  ct.rect(30, 10, 100, 30);
  ct.drawFocusIfNeeded(b1);
context.clip()

現在のパスの内側をクリッピング領域とします。クリッピングを解除するには、save()restore() を使用します。

JavaScript
  ct.beginPath();
  ct.arc(80, 50, 40, 0, Math.PI * 2);
  ct.clip();
  var img = new Image();
  img.src = './image/neko.jpg?' + new Date().getTime();
  img.onload = function() {
    ct.fillStyle = ct.createPattern(img, 'repeat');
    ct.fillRect(10, 10, 110, 80);
  };
Example
context.isPointInPath(x, y)

指定した座標が、現在のパスの内側にあるか否かを true, false で返します。

JavaScript
  ct.beginPath();
  ct.rect(10, 10, 100, 80);
  var ret1 = ct.isPointInPath(50, 50);
  ct.fillText(ret1, 50, 50);
  var ret2 = ct.isPointInPath(150, 50);
  ct.fillText(ret2, 150, 50);
  ct.stroke();
Example

イメージ描画

context.drawImage(image, dx, dy)
context.drawImage(image, dx, dy, dw, dh)
context.drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)

イメージを描画します。(dx, dy) は画像を描画する座標を示します。dw, dh は画像の横幅、高さを指定します。3番目の形式は、表示する画像の (sx, sy) から横幅 sw、高さ sh の領域をクリッピングして表示します。Internet Explorer で、画像が一度読み込まれると、別ページに遷移しても onload ハンドラが呼び出されない問題を解消するために、画像 URL の末尾に new Date().getTime() を追加し、画像 URL が毎回変化するようにしています。

JavaScript
  var img = new Image();
  img.src = '../../image/ki2.gif?' + new Date().getTime();
  img.onload = function() {
    ct.drawImage(img, 40, 40);
    ct.drawImage(img, 100, 40, 15, 15);
    ct.drawImage(img, 4, 4, 16, 16, 160, 40, 30, 30);
  };
Example

ヒットリージョン

context.addHitRegion(options)
context.removeHitRegion(id)
context.clearHitRegions()
event.region

現在のパスに対してヒットリージョンを追加・削除・クリアします。Chrome と Firefox で試験的に実装されています。下記の例では、矩形をクリックするとハンドラを呼び出します。Chrome の場合は、chrome://flags/#enable-experimental-canvas-features を、Firefox の場合は about:config で canvas.hitregions.enabled を true に設定してください。

JavaScript
  var cv = document.getElementById('cv-addHitRegion'); if (!cv) { return; }
  var ct = cv.getContext('2d'); if (!ct) { return; }
  cv.addEventListener("click", function(event) {
    if (event.region) {
      alert(event.region);
    }
  });
  ct.beginPath();
  ct.rect(30, 30, 40, 40);
  ct.stroke();
  try {
    ct.addHitRegion({id:'Reagion#1'});
  } catch (e) {
    console.log("Not supported");
  }
Example

addHitRegion() には、下記のパラメータを任意で指定することができます。

id: ヒットリージョンの ID を指定します。event.region で参照できます。デフォルトは空文字です。
control: イベントがルーティングされる要素を指定します。デフォルトは null です。

ピクセル操作

imagedata = context.createImageData(sw, sh)
imagedata = context.createImageData(imagedata)
imagedata = context.getImageData(sx, sy, sw, sh)
imagedata.width
imagedata.height
imagedata.data
context.putImageData(imagedata, dx, dy [, dirtyX, dirtyY, dirtyWidth, dirtyHeight ])

createImageData() はイメージデータを作成します。width はイメージデータの横幅を、height はイメージデータの高さを示します。dataheight * width * 4 個の配列で、R値、G値、B値、透明度(0~255) の 4個の値が、横幅分 × 高さ分並びます。下記の例では、80 × 80 のイメージデータを作成し、RGBA値を指定し、putImageData() で描画しています。

JavaScript
  var img = ct.createImageData(80, 80);
  for (var y = 0; y < img.height; y++) {
    for (var x = 0; x < img.width; x++) {
      img.data[(y * img.width + x) * 4 + 0] = (y / img.height) * 255;
      img.data[(y * img.width + x) * 4 + 1] = (x / img.width) * 255;
      img.data[(y * img.width + x) * 4 + 2] = 255;
      img.data[(y * img.width + x) * 4 + 3] = 255;
    }
  }
  ct.putImageData(img, 10, 10);
Example

下記の例では、画像 img1 を表示し、その画像を getImageData() で img2 に読み取り、左右を逆転させながら img3 に複製し、描画しています。Chrome や Firefox ではセキュリティ制約により、ローカル環境では動作しません。

JavaScript
  var img1 = new Image();
  img1.src = '../../image/ki2.gif?' + new Date().getTime();
  img1.onload = function() {
    ct.drawImage(img1, 10, 10, 30, 30);
    try {
      var img2 = ct.getImageData(10, 10, 30, 30);
    } catch (e) {
      console.log(e);
      return;
    }
    var img3 = ct.createImageData(30, 30);
    for (var y = 0; y < img2.height; y++) {
      for (var x = 0; x < img2.width; x++) {
        img3.data[(y * img2.width + x) * 4 + 0] = img2.data[(y * img2.width + (img2.width - x - 1)) * 4 + 0];
        img3.data[(y * img2.width + x) * 4 + 1] = img2.data[(y * img2.width + (img2.width - x - 1)) * 4 + 1];
        img3.data[(y * img2.width + x) * 4 + 2] = img2.data[(y * img2.width + (img2.width - x - 1)) * 4 + 2];
        img3.data[(y * img2.width + x) * 4 + 3] = img2.data[(y * img2.width + (img2.width - x - 1)) * 4 + 3];
      }
    }
    ct.putImageData(img3, 50, 10);
  };
Example

下記の例では、RGB値の平均値を複製することにより、モノトーン画像に変換しています。Chrome や Firefox ではセキュリティ制約により、ローカル環境では動作しません。

JavaScript
  var img1 = new Image();
  img1.src = '../../image/ki2.gif?' + new Date().getTime();
  img1.onload = function() {
    ct.drawImage(img1, 10, 10, 30, 30);
    try {
      var img2 = ct.getImageData(10, 10, 30, 30);
    } catch (e) {
      console.log(e);
      return;
    }
    var img3 = ct.createImageData(30, 30);
    for (var y = 0; y < img2.height; y++) {
      for (var x = 0; x < img2.width; x++) {
        var r = img2.data[(y * img2.width + x) * 4 + 0];
        var g = img2.data[(y * img2.width + x) * 4 + 1];
        var b = img2.data[(y * img2.width + x) * 4 + 2];
        img3.data[(y * img2.width + x) * 4 + 0] = (r + g + b) / 3;
        img3.data[(y * img2.width + x) * 4 + 1] = (r + g + b) / 3;
        img3.data[(y * img2.width + x) * 4 + 2] = (r + g + b) / 3;
        img3.data[(y * img2.width + x) * 4 + 3] = img2.data[(y * img2.width + x) * 4 + 3];
      }
    }
    ct.putImageData(img3, 50, 10);
  };
Example

コンポージング

context.globalAlpha [ = value ]

透明度を参照(設定)します。透明度は、0.0~1.0 の数値で指定します。

JavaScript
  // 青い矩形
  ct.fillStyle = 'rgb(160, 160, 255)';
  ct.fillRect(10, 40, 160, 20);
  // 赤い矩形
  ct.fillStyle = 'rgb(255, 160, 160)';
  ct.fillRect(20, 20, 60, 60);
  // 赤い矩形(半透明)
  ct.globalAlpha = 0.5;
  ct.fillRect(100, 20, 60, 60);
Example
context.globalCompositeOperation [ = value ]

globalCompositeOperation は、複数の画像が重なった場合の動作を参照(設定)します。

JavaScript
  ct.fillStyle = 'rgb(160, 160, 255)';
  ct.fillRect(10, 10, 40, 40);
  ct.globalCompositeOperation = 'xor';
  ct.fillStyle = 'rgb(255, 160, 160)';
  ct.fillRect(30, 30, 40, 40);
Example
source-atop: 両方のイメージが不透明な部分に描画イメージを、相手イメージが不透明で描画イメージが透明な部分に相手イメージを表示します。
source-in: 描画イメージが相手イメージからはみ出す部分のみを表示します。
source-out: 描画イメージが相手イメージに重なる部分のみを表示します。
source-over: 重なる部分に描画イメージを表示します。
destination-atop: 両方のイメージが不透明な部分に相手イメージを、描画イメージが不透明で相手イメージが透明な部分に描画イメージを表示します。
destination-in: 相手イメージが描画イメージからはみ出す部分のみを表示します。
destination-out: 相手イメージが描画イメージに重なる部分のみを表示します。
destination-over: 重なる部分に相手イメージを表示します。
lignter: 重なった部分に相手イメージと描画イメージの RGBA値 を合計したもの(最大255)を描画します。
copy: 相手イメージの代わりに描画イメージを表示します。
xor: 重なる部分を透明にします。
Example


context.shadowColor [ = value ]
context.shadowOffsetX [ = value ]
context.shadowOffsetY [ = value ]
context.shadowBlur [ = value ]

影を指定します。shadowColor は影の色、shadowOffsetX, shadowOffsetY は影の位置、shadowBlur はぼかしレベルを参照(設定)します。

JavaScript
  ct.shadowColor = 'rgb(90, 90, 90)';
  ct.shadowOffsetX = 5;
  ct.shadowOffsetY = 5;
  ct.shadowBlur = 5;
  ct.fillRect(10, 10, 60, 60);
Example

Copyright (C) 2015-2021 杜甫々
初版:2015年10月4日 最終更新:2021年12月5日
http://www.tohoho-web.com/html/canvas/index.html