Diskusia – 27. diel - 2D kontext plátna v JavaScripte

chtel bych se zeptat, kdyz neudelam tag <img> ale vytvorim ho v javascriptu a potom mu dam src hodnotu, jak to ze to nejde? Cestu mam spravne. Vykresli se pouze cerna barva, bez obrazku jako patternu, nevite v cem to je?

<script>
let platno;
let kontext;
let obrazek;
window.onload = function(){
platno = document.getE­lementById("plat­no");
kontext = platno.getCon­text("2d");

obrazek = new Image();
obrazek.src = "fotky/lamp1.png";

let pattern = kontext.create­Pattern(obrazek, "");

kontext.fillStyle = pattern;
kontext.fillRec­t(50, 50, 100, 100);

kontext.begin­Path();
kontext.arc(100, 225, 50, 0, Math.PI * 2);
kontext.close­Path();
kontext.fill();

}
</script>

Tak tato sekce tutoriálu je pěkně odfláklá.
V podstatě je to úplně stejné, jako kdybyste vypsali možné metody třídy canvas a pod to připsali: použití si vygooglete.
U víc jak půlky příkladů jsem to musel udělat. Je to tu hůř popsané, než kdybych si o tom přečetl rovnou dokumentaci.
Snad poprvé tady na stránkách kritizuji bohužel celou sekci:(

Příklad:

Zvětšení/zmenšení
Kontext můžeme zmenšovat a zvětšovat. Slouží k tomu metoda scale(), která jako parametry přijímá násobky skutečné hodnoty pro souřadnice X a Y. Pro zmenšování se zadávají desetinná čísla menší než 1.

Ale to, že se musí metoda scale volat před vykreslováním obrázku, to jsem si musel vygooglit.

To ano, ale to je dál za touhle sekcí.

A nebo (objektově) můžeš vytvořit instanci čtverce a pak s ní pracuješ, voláš její metody a modifikuješ ji.

Ahoj, nesetkal se někdo během používání metody getImageData() s takovouto chybou ?

Uncaught DOMException: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.

Google zatím nepomohl. Obrázek mám lokálně ve složce..

Díky,
Marek

Vyřešeno lokálním serverem přes node.js + browsersync. Myslím, že toto během návodu nebylo zmíněno, že je třeba lokální server.

Z nějakého důvodu chrome blokuje při využití některých funkcí canvasu lokální cestu k souboru.

V Linearnim prechodu v popisu je preklep - addStopColor() místo addColorStop()

Nevím, jestli to bylo někde zmíněné (užitečná vychytávka) - aby byl canvas responzivní, stačí přidat do CSS:

canvas{
    width: 100%;
}

Také mi to nefungovalo. Musel jsem to zabalit do funkce pro načtení obrázku a pak se to rozběhlo.

let platno;
let kontext;
let obrazek;

window.onload = function () {
    platno = document.getElementById("platno");
    kontext = platno.getContext("2d");
    obrazek = new Image();
    obrazek.src = "obrazky/vzor.png";


   obrazek.onload = function() {
  let pattern = kontext.createPattern(obrazek, 'repeat');
  kontext.fillStyle = pattern;
  kontext.fillRect(0, 0, 100, 100);

  kontext.beginPath();
        kontext.arc(100, 225, 50, 0, Math.PI * 2);
        kontext.closePath();
        kontext.fill();
};
}

Ahoj,
není náhodou chybička v textu? Viz obrázek přehozený slovosled metody?

nechci být hrubý, ale dle mého je to docela nešťastně napsané celé tahle lekce. Doposud tu bylo vše krásně zpracované a nebylo třeba toliko googlení okolo. Tady tyhle dvě lekce o <canvas> mě docela zasekaly.