console
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.canvas {
border: 1px solid red;
}
</style>
</head>
<body>
<canvas class="canvas" id="canvas" width="500" height="500"></canvas>
<script>
window.onload = function () {
var canvas = document.getElementsByTagName("canvas")[0];
var context = canvas.getContext("2d");
context.beginPath();
context.fillStyle = "#ccc";
context.rect(50, 50, 50, 50);
context.fill();
context.closePath();
context.beginPath();
context.fillStyle = "skyblue";
context.translate(75, 75);
context.rotate((45 * Math.PI) / 180);
context.translate(-75, -75);
context.rect(50, 50, 50, 50);
context.fill();
context.closePath();
};
</script>
</body>
</html>