Тег <canvas> — полотно HTML5: графіка й ігри в браузері

HTML

<h3>Приклад використання тегу <code>canvas</code></h3>

<p>Шахматна дошка</p>
<canvas id='chessboard'>Шахматна дошка</canvas>

JS

var canvas = document.getElementById("chessboard");
var context = canvas.getContext('2d');

canvas.width = 300;
canvas.height = 300;

context.strokeRect(15, 15, 266, 266);

context.strokeRect(18, 18, 260, 260);

context.fillRect(20, 20, 256, 256);
for (i = 0; i < 8; i += 2) {if (window.CP.shouldStopExecution(0)) break;
  for (j = 0; j < 8; j += 2) {if (window.CP.shouldStopExecution(1)) break;
    context.clearRect(20 + i * 32, 20 + j * 32, 32, 32);
    context.clearRect(20 + (i + 1) * 32, 20 + (j + 1) * 32, 32, 32);
  }window.CP.exitedLoop(1);}window.CP.exitedLoop(0);
//# sourceURL=pen.js

HTML

<h3>Приклад використання тегу <code>canvas</code></h3>

<p>Градієнтне зображення</p>
<canvas id="lineargradient" width="300" height="300"></canvas>

JS

var canvas = document.getElementById("lineargradient");
var context = canvas.getContext("2d");
var gradient = context.createLinearGradient(0, 0, 290, 150);
gradient.addColorStop(0.0, 'blue');
gradient.addColorStop(0.5, 'red');
gradient.addColorStop(1.0, 'green');
context.fillStyle = gradient;

context.fillRect(0, 0, 290, 290);
//# sourceURL=pen.js

HTML

<h3>Приклади використання тегу <code>canvas</code></h3>


<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
</canvas>
<canvas id="myCanva" width="200" height="100" style="border:1px solid #d3d3d3;"></canvas>

<canvas id="Canvas" width="200" height="100" style="border:1px solid #d3d3d3;"></canvas>

JS

var c = document.getElementById("myCanva");
var ctx = c.getContext("2d");
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.stroke();

var c = document.getElementById("Canvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
ctx.stroke();
//# sourceURL=pen.js