33 lines
749 B
HTML
33 lines
749 B
HTML
<!doctype html>
|
|
<html>
|
|
|
|
<head>
|
|
<title>Canvas HTML5</title>
|
|
<style>
|
|
#canvas {
|
|
border: 1px solid black;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<canvas id="canvas" width="640" height="640">Not Supported</canvas>
|
|
<script>
|
|
const canvas = document.querySelector('#canvas');
|
|
const ctx = canvas.getContext('2d');
|
|
const str = "Hello World";
|
|
ctx.font = 'italic 50px Comic';
|
|
ctx.fillStyle = 'blue';
|
|
//ctx.textAlign = 'left';
|
|
ctx.fillText(str, 100, 100);
|
|
ctx.font = 'bold 20px Arial';
|
|
ctx.fillStyle = 'red';
|
|
for (let x = 1; x < 11; x++) {
|
|
ctx.fillText("counter:" + x, 50, (200 + (40 * x)));
|
|
}
|
|
|
|
</script>
|
|
</body>
|
|
|
|
</html>
|