<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> canvas { border: 1px dashed gray; } </style> <script type="text/javascript"> window.onload = function() { // Get the canvas object var oCanvas = document.getElementById("canvas") ; if (oCanvas.getContext) { // Get the 2d drawing context var oContext = oCanvas.getContext("2d"); var oImageData = oContext.createImageData(100, 100); var data = oImageData.data; for (var i = 0; i < data.length; i = 4) { // Red data[i 0] = 255; // Green data[i 1] = 0; // Blue data[i 2] = 0; / / Transparency data[i 3] = 100; } oContext.putImageData(oImageData, 10, 10); } } </script> </head> <body> <canvas id="canvas" height="600 " width="600"></canvas> </body></html>
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Why is it ineffective? I wrote it according to the course