estou desenvolvendo um trabalho de faculdade que consiste basicamente em criar uma espécie de "Paint" utilizando o canvas
do HTML5 em conjunto com Javascript, mas me deparei com um problema ao tentar atualizar um canvas
que serve para mostrar o tamanho atual do tracejado...
Estou utilizando um input
do tipo range
para definir o tamanho do tracejado e o evento oninput
para detectar a mudança de valor no input
, no momento, estou com o código abaixo:
HTML
<input type="range" id="lineSize" class="no_margin range" value="2" min="1" max="20" />
<canvas id="showSize" width="40" height="40" />
Javascript
var lineSize = document.getElementById("lineSize");
function clearCanvas(canvas) {
var ctx = canvas.getContext("2d");
ctx.clearRect(0, 0, canvas.width, canvas.height);
}
function updateLineSize(size) {
var canvas = document.getElementById("showSize");
clearCanvas(canvas);
var ctx = canvas.getContext("2d");
ctx.arc(canvas.width/2, canvas.height/2, size/2.0, 0, 2 * Math.PI, false);
ctx.fillStyle = "#000000";
ctx.fill();
}
updateLineSize(lineSize.value);
lineSize.oninput = function() {
updateLineSize(this.value);
}
O que acontece é que, toda vez que a função updateLineSize
é chamada, ele sempre preenche o círculo com o tamanho do maior size
já utilizado, mesmo após reduzir o valor no input
.
Como eu poderia resolver esse problema?
----- EDIT -----
Eu consegui resolver o problema recriando o canvas
toda vez que eu mudo o valor do input
, alterando a função updateLineSize
da seguinte forma:
function updateLineSize(size) {
var holder = document.getElementById("showSizeHolder");
while (holder.firstChild) {
holder.removeChild(holder.firstChild);
}
var canvas = document.createElement("canvas");
canvas.id = "showSize";
canvas.className = "option";
holder.appendChild(canvas);
canvas.width = 40;
canvas.height = 40;
var ctx = canvas.getContext("2d");
ctx.arc(canvas.width/2, canvas.height/2, size/2.0, 0, 2 * Math.PI, false);
ctx.fillStyle = "#000000";
ctx.fill();
}
Mas alguém saberia me explicar o motivo de não funcionar da outra forma?