| <html><head></head><body> |
| 1, 3, and 4 should all show the same red square. 2 should show nothing. |
| <ol> |
| <li><canvas id="canvas" width="100" height="100"></canvas></li> |
| <li><img src="" id="a"></li> |
| <li><img src="" id="b"></li> |
| <li><img src="" id="c"></li> |
| </ol> |
| |
| <script type="text/javascript"> |
| |
| var canvas = document.getElementById( 'canvas' ); |
| var context = canvas.getContext( '2d' ); |
| var img = context.getImageData( 0, 0, canvas.width, canvas.height ); |
| |
| var img_a = canvas.toDataURL( 'image/png' ); |
| |
| /* fill with red */ |
| for ( var i = 0; i < img.data.length; i += 4 ) |
| img.data[i] = img.data[i+3] = 255; |
| |
| context.putImageData( img, 0, 0 ); |
| var img_b = canvas.toDataURL( 'image/png' ); |
| |
| console.log( 'a == b? ' + (img_a == img_b) ); |
| |
| context.moveTo( 0, 0 ); |
| context.lineTo( 0, 0 ); |
| context.stroke(); |
| |
| var img_c = canvas.toDataURL( 'image/png' ); |
| console.log( 'a == c? ' + (img_a == img_c) ); |
| |
| document.getElementById( 'a' ).src = img_a; |
| document.getElementById( 'b' ).src = img_b; |
| document.getElementById( 'c' ).src = img_c; |
| </script> |
| |
| </body></html> |
