CANVAS(HTML) - Images

canvas 要素を記述する

<canvas id="sample" width="400" height="300"></canvas>

描画機能を有効にする

HTML

<canvas id="sample" width="400" height="300"></canvas>

Javascript

const canvas = document.getElementById('sample');
const context = canvas.getContext('2d');

背景色を指定

背景色を変更するには、Javascript もしくは CSS で変更します。

HTML

<canvas id="sample" width="300" height="150"></canvas>

CSS

const canvas = document.getElementById('sample');
const context = canvas.getContext('2d');

context.beginPath();
context.fillStyle = 'rgb( 0, 0, 0)';
context.fillRect(0, 0, 400, 300);

テキストを描く

HTML

<canvas id="sample2" width="300" height="150"></canvas>

Javascript

const canvas2 = document.getElementById('sample2');
const context2 = canvas2.getContext('2d');

context2.fillStyle="red";
context2.font = "bold 24px serif";
context2.fillText('Hello World', 20, 50);


context2.strokeStyle="blue";
context2.font = "bold 48px serif";
context2.strokeText("Hello world", 30, 100);