| <canvas id="canvas" width="200" height="100"></canvas> |
| <script> |
| var img = new Image(); |
| // This is a 2x1 image, blue at (0, 0) and green at (1, 0). |
| img.src = 'data:image/png;base64,' + |
| 'iVBORw0KGgoAAAANSUhEUgAAAAIAAAABCAIAAAB7QOjdAAAAAXNSR0IArs4c6QAAAAlwSFlzAAALEwAA' + |
| 'CxMBAJqcGAAAAAd0SU1FB9wIGxQKIbPpHtMAAAAPSURBVAjXY2Bg+M/wnwEABgEB/6KPEdkAAAAASUVO' + |
| 'RK5CYII='; |
| |
| img.onload = function() |
| { |
| // Start from the middle of the blue pixel and stretch to the entire |
| // canvas. Canvas should have 1/3 blue on the left and 2/3 green on the |
| // right, with gradient if interpolation allows. |
| var ctx = document.getElementById("canvas").getContext("2d"); |
| ctx.drawImage(img, 0.5, 0, 1.5, 1, 0, 0, 200, 100); |
| } |
| </script> |
