Canvas 2D API の CanvasRenderingContext2D.stroke() メソッドは、現在のあるいは渡されたパスを、ノンゼロワインディング規則を使って、現在のストロークスタイルで描きます。

構文

void ctx.stroke();
void ctx.stroke(path);

引数

path
描画する Path2D パス。

stroke メソッドを使う

これは stroke メソッドを使ってパスを描画する、実にシンプルなコード断片です。

HTML

<canvas id="canvas"></canvas>

JavaScript

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.rect(10, 10, 100, 100);
ctx.stroke();

下のコードを編集して、変更が canvas に直に反映されることを確認してください。

Playable code
<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
<div class="playable-buttons">
  <input id="edit" type="button" value="Edit" />
  <input id="reset" type="button" value="Reset" />
</div>
<textarea id="code" class="playable-code">
ctx.rect(10, 10, 100, 100);
ctx.stroke();</textarea>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var textarea = document.getElementById("code");
var reset = document.getElementById("reset");
var edit = document.getElementById("edit");
var code = textarea.value;

function drawCanvas() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  eval(textarea.value);
}

reset.addEventListener("click", function() {
  textarea.value = code;
  drawCanvas();
});

edit.addEventListener("click", function() {
  textarea.focus();
})

textarea.addEventListener("input", drawCanvas);
window.addEventListener("load", drawCanvas);

仕様

仕様 状態 コメント
HTML Living Standard
CanvasRenderingContext2D.stroke の定義
現行の標準  

ブラウザ互換性

現在、互換性データを可読形式の JSON フォーマットに置き換えているところです。 この互換性一覧は古い形式を使っており、これに含まれるデータの置き換えが済んでいません。 手助けしていただける場合は、こちらから!

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari
基本サポート (有) (有) (有) (有) (有)
パスの引数 (有) 31 (31) 未サポート (有) 未サポート
Feature Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
基本サポート (有) (有) (有) (有) (有) (有)
パスの引数 ? ? 31.0 (31) ? ? ?

参考情報

ドキュメントのタグと貢献者

このページの貢献者: sii
最終更新者: sii,