Rysowanie bitmapy na canvas-ie w JavaScript odbywa się za pomocą jednej metody kontekstu urządzenia związanego z danym canvas-em. Metodą tą jest drawImage. Zanim jednak, to trzeba sobie wyjaśnić jak można pozyskać samą bitmapę. Istnieją praktycznie dwie metody: pierwsza polegająca na wyciągnięciu elementu img z DOM załadowanej strony, zaś drugą jest użycie obiektu Image do załadowania takiej grafiki.
window.onload = function(){
var canvas = document.getElementById("drawImage");
var ctx = canvas.getContext("2d");
var bitmap = document.getElementById("myimage");
ctx.drawImage(bitmap, 0, 0, canvas.width, canvas.height); // rysowanie bitmapy tak, by wypełniła canvas
}
Aby powyższy kod zadziałał na stronie musi być następujący kod HTML:
Wtedy to wynik działania skryptu będzie następujący:
Metodę drawImage można również wywołać z trzema argumentami:
window.onload = function(){
var canvas = document.getElementById("drawImage");
var ctx = canvas.getContext("2d");
var bitmap = document.getElementById("myimage");
ctx.drawImage(bitmap, 0, 0);
}
Wynik działania powyższego kodu:
Ostatnia możliwość to wywołanie metody drawImage z dziewięcioma parametrami umożliwia określenie prostokąta docelowego i prostokąta źródłowego (przycinanie z skalowaniem).
window.onload = function(){
var canvas = document.getElementById("drawImage");
var ctx = canvas.getContext("2d");
var bitmap = document.getElementById("myimage");
ctx.drawImage(bitmap, 100, 100, canvas.width, canvas.height, 0, 0, canvas.width, canvas.height); // argumenty to: bitmapa; współrzędne prostokąta wycinanego z bitmapy; współrzędne prostokąta docelowego
}
