Aspect interesant Canvas. Deosebiri intre metode de stilizare.

Am remarcat un lucru destul de ciudat din punctul meu de vedere. Concret, dacă stilizăm Canvas-ul în modul acesta:

<canvas id="panza" style="border: 1px solid black;" width=300px height=300px > </canvas>

Nu avem nici o problemă. În ce sens? Am setat lățimea=lungimea=300px pt. pânza noastră.

Astfel, dacă avem un cod Javascript ca acesta:

var link=document.getElementById("panza");
var ob2=link.getContext("2d");
ob2.fillStyle="red";
ob2.fillRect(0,0,250,200);

Width si Height sunt corespunzătoare pt. obiectul nostru - dreptunghiul - (250 din 300 sunt luate pt. lățime, respectiv 200 din 300 sunt luate pt. lungimea obiectului). Poza1.

Dacă în schimb, definim width și heigh pt. canvas prin CSS adică eliminăm atributele width/heigh pt. elementul HTML canvas, introducându-le într-o foaie externă CSS (sau în cazul nostru, vom pune width/heigh in interiorul atributului style:

<canvas id="panza" style="border: 1px solid black; width:300px; height:300px" > </canvas>

Toată opera de artă se duce. Respectiv vedeți poza2. Width-ul rămâne totuși respectat, dar lungimea ... o trage în jos la mama sărăciei.

Care este explicația? Două metode de definire a lungimii/lățimii pt. un element HTML oferă două perspective diferite...
Mă gândesc că poate funcția .fillRect(a,b,c,d,) caută parametri c,d, între atributele canvas-ului și nu se uită și în CSS după acestea? Deși.. nu prea cred.

Edited by Rhesus, 06 September 2015 - 16:48.

atributele seteaza sistemul de coordonate al canvasului, css-ul stilizeaza containerul ce contine canvasul si iti intinde continutul cat ii zici tu.

http://stackoverflow...ight-properties