Redimensionamento e referência em Canvas

[M4n0w4r 0]

Falaaaaaaaaaa galeraaaaaaaaa bonitaaaaaaaaaaaaaaaaaaaaaaaaaa

 

Seguinte, já vi a documentação e muitos exemplos sobre canvas na internet mas nada falava sobre essas minhas duas dúvidas que irei explicar com base no exemplo abaixo

 

// Cria o container
var canvas = document.createElement ("canvas");
canvas.setAttribute ("height", height + "px");
canvas.setAttribute ("width", width + "px");

// Aplica no documento
document.body.appendChild ("canvas");

// Canvas 2d
var ctx = canvas.getContext ("2d");

// Cor do quadrado
ctx.fillStyle = "rgb(0, 0, 0)";
// Cria o quadrado
ctx.fillRect (0, 0, 100, 100);

 

Redimensionamento

Como é possível redimensionar a largura do quadrado que eu criei ? Creio que tenha algo haver com transform/setTransform mas a documentação pobre e os exemplos confusos não me ajudaram no seu entendimento.

 

Referência

Como posso armazenar o quadrado criado em uma variável para futuras modificações e/ou vizualizações ?

 

Vlwwwwwwwwwwww galeraaaaaaaaaaaaaaaaaaaaaaaaaaa, quem puder me ajudar eu agradeço muito, flowwwwwwwwwwwwwwwwwwww :D

[klonder 14]

Não estou muito acostumado a trabalhar com esse elemento. Os rápidos exemplos que pude verificar só funcionam no Firefox.

Não seria possível trabalhar com div nesse seu exemplo (em busca de algo cross-browser)?

[M4n0w4r 0]

Canvas é um padrão HTML5 da WHATWG e o chrome, safari e opera também o suportam.

 

Em muitos casos o IE somente segue os padrões do seu própio nariz, cansei de escrever código crossover, vou seguir os padrões W3C e WHATWG. No meu caso não tem problema pois so faço websites por hobby :)

 

Obrigado pela resposta Klonder, vou continuar procurando por essa solução para futuramente compartilhar com vocês