window.onload = function() {
var drawingCanvas = document.getElementById('canvas');
if (drawingCanvas && drawingCanvas.getContext) {
var context = drawingCanvas.getContext('2d');
// Рисуем окружность
context.strokeStyle = "#000";
context.fillStyle = "#fc0";
context.beginPath();
context.arc(100, 100, 50, 0, Math.PI * 2, true);
context.closePath();
context.stroke();
context.fill();
// Рисуем левый глаз
context.fillStyle = "#fff";
context.beginPath();
context.arc(84, 90, 8, 0, Math.PI * 2, true);
context.closePath();
context.stroke();
context.fill();
// Рисуем правый глаз
context.beginPath();
context.arc(116, 90, 8, 0, Math.PI * 2, true);
context.closePath();
context.stroke();
context.fill();
// Рисуем рот
context.beginPath();
context.moveTo(70, 115);
context.quadraticCurveTo(100, 130, 130, 115);
context.quadraticCurveTo(100, 150, 70, 115);
context.closePath();
context.stroke();
context.fill();
}
}
html,
body {
width: 100%;
height: 100%;
position: relative;
}
#canvas {
position: absolute;
border: 1px solid black;
}
#orientationWarning {
position: absolute;
border: 1px solid red;
}
<div id="orientationWarning">
<h1>Поверните экран горизонтально!</h1>
</div>
<canvas id="canvas" width="300" height="300"></canvas>