1347147-1.html (935B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <script> 6 function draw() { 7 var c = document.getElementById('c').getContext('2d'); 8 9 c.fillStyle = 'lime'; 10 c.fillRect(0, 0, 100, 50); 11 12 var imgdata = c.createImageData(60, 50); 13 for (var i = 0; i < imgdata.data.length; i += 4 * 60) { 14 for (var x = i; x < i + 4 * 30; x += 4) { 15 imgdata.data[x] = 255; 16 imgdata.data[x+3] = 255; 17 } 18 for (var x = i + 4 * 30; x < i + 4 * 60; x += 4) { 19 imgdata.data[x+2] = 255; 20 imgdata.data[x+3] = 255; 21 } 22 } 23 24 // Verify that putImageData is not affected by the current transform. 25 c.translate(20, 0); 26 c.putImageData(imgdata, 40, 0); 27 } 28 </script> 29 </head> 30 <body onload="draw();"> 31 <canvas id='c' width='100' height='50'></canvas> 32 </body> 33 </html>