Zielony Smok

HTML5 canvas – tutorial

Uwagi do toDataURL()

dataURL możemy użyć w następujących konfiguracjach:

  1. cv.toDataURL()
  2. cv.toDataURL("image/png")
  3. cv.toDataURL("image/jpeg", 1.0)

Dwa pierwsze zapisy są identyczne ponieważ domyślnie obraz zapisywany jest jako ‘png’. Tło obrazka jest czarne: rgb(0,0,0), ale ponieważ kanał alfa jest ustawiany na 0, czyli obrazek jest przezroczysty: rgba(0,0,0,0).

Zastosowanie dataURL

Przez obrazek będzie jest widoczne np. białe tło.

Zastosowanie dataURL

Jeżeli użyjemy trzeciego zapisu otrzymamy tło czarne rgb(0,0,0).

Zastosowanie dataURL

Jest to wynikiem faktu, że tablica danych jest pusta, czyli rgb(0,0,0).

W takiej sytuacji alfa jest przyjmowane domyślnie jako 1.0, a więc otrzymujemy rgb(0,0,0,1), czyli kolor czarny.

Jeśli nie chcesz koloru czarnego możesz wypełnić canvas żądanym kolorem, a następnie rysować na canvas.