Jak zacząć pracę z Canvasem?

Canvas (ang. płótno) to takie coś, po czym możesz rysować, wyświetlać różne figury, obrazki itp.

Stwórzmy element Canvas i dodajmy go do dokumentu:

const canvas = document.createElement('canvas');
canvas.style.border = '1px solid red'; // możesz usunąć tę linijkę
canvas.width = 500;
canvas.height = 500;
document.body.append(canvas);

No dobra, ale co z tym dalej robić? Mamy obiekt Canvas, jaką jego metodę mamy wywołać, żeby coś narysować?

Żadną XD Obiekt canvas reprezentuje samo płótno (element DOM), ale nie ma w nim metod do rysowania. Żeby coś narysować, trzeba pobrać specjalny obiekt kontekstu i to dopiero kontekst będzie rysował:

const ctx = canvas.getContext('2d');
ctx.fillStyle = 'purple';
ctx.fillRect(100, 100, 40, 40);

Oto narysowaliśmy na pozycji 100x100 fioletowy prostokąt o wymiarach 40x40.

Oczywiście na canvas można rysować wiele różnych bardziej złożonych kształtów, prostokąt to nie szczyt możliwości, odsyłam do dokumentacji: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API

Ale dobra, niech będzie już ten prostokąt. Zanimujmy go! Niech on się porusza w prawo!

Canvas jednak w przeciwieństwie do elementów DOM działa tak, że rysujesz cokolwiek i to już tam jest. Nie możesz sobie przesunąć prostokątu, możesz co najwyżej narysować taki sam prostokąt w innym miejscu:

let x = 100;
setInterval(() => {
  x += 1;
  ctx.fillStyle = 'purple';
  ctx.fillRect(x, 100, 40, 40);
}, 16);

Ojej... co tu się zadziało?

Nic czego by się nie dało naprawić. Po prostu zapomnieliśmy wyczyścić canvasa:

let x = 100;
setInterval(() => {
  x += 1;
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.fillStyle = 'purple';
  ctx.fillRect(x, 100, 40, 40);
});

Teraz wygląda to okej:

Jednak jak uruchomisz, to bardzo szybko wjeżdża w prawo i znika. A co jeśli by po zniknięciu z prawej strony pojawił się z lewej? Spoko, da się zrobić, tylko zastosujemy pewien trick. Zamiast x += 1, podstawmy taki kod:

  
   x = (x + 1) % canvas.width;

Liczy resztę z dzielenia przez canvas.width, co oznacza, że zawsze będzie w tych granicach. Jak x miałaby przekroczyć canvas.width, to się wyzeruje.

To i tym sposobem zaczęliśmy pracę z canvas. Tutaj masz jsfiddle do dalszej zabawy. A oto nasz kodzik:

const canvas = document.createElement('canvas');
canvas.style.border = '1px solid red'; // możesz usunąć tę linijkę
canvas.width = 500;
canvas.height = 500;
document.body.append(canvas);

const ctx = canvas.getContext('2d');
ctx.fillStyle = 'purple';
ctx.fillRect(100, 100, 40, 40);


let x = 100;
setInterval(() => {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  x = (x + 1) % canvas.width;
  ctx.fillStyle = 'purple';
  ctx.fillRect(x, 100, 40, 40);
}, 16);