I'm a very beginner for Javascript. I tried to draw shapes with some radio buttons. But, the button is not working. When I draw each, it works. What do I need to do here?
<h2>Painting Editor</h2>
<br />
<div align="center">
<label>Line <input type="radio" name="Shape" value="Line" id="Line" checked /> </label>
<label>Rectangle <input type="radio" name="Shape" value="Rectangle" id="Rectangle" /> </label>
<label>Circle <input type="radio" name="Shape" value="Circle" id="Circle" /> </label>
The part above is to assign the radio buttons.
<br />
<div id="sketch">
<canvas id="paint" width="700" height="700"></canvas>
</div>
<script>
(function () {
var canvas = document.querySelector('#paint');
var context = canvas.getContext('2d');
var sketch = document.querySelector('#sketch');
var sketch_style = getComputedStyle(sketch);
// Pase into integer of Canvas size
canvas.width = parseInt(sketch_style.getPropertyValue('width'));
canvas.height = parseInt(sketch_style.getPropertyValue('height'));
// Creating a tmp canvas
var tmp_canvas = document.createElement('canvas');
var tmp_context = tmp_canvas.getContext('2d');
tmp_canvas.id = 'tmp_canvas';
tmp_canvas.width = canvas.width;
tmp_canvas.height = canvas.height;
sketch.appendChild(tmp_canvas);
// Mouse Position Setting
var mouse = { x: 0, y: 0 };
var last_mouse = { x: 0, y: 0 };
/* Drawing on Paint*/
tmp_context.lineWidth = 4;
tmp_context.lineJoin = 'round';
tmp_context.lineCap = 'round';
tmp_context.strokeStyle = 'Red';
tmp_context.fillStyle = 'Red';
var shape = '';
document.querySelector('#Line').onchange() = function () {
if (this.checked)
shape = 'Line';
tmp_canvas.style.display = 'block';
}
/* Mouse Capturing Work */
tmp_canvas.addEventListener('mousemove', function (e) {
mouse.x = typeof e.offsetX === 'undefined' ? e.offsetX : e.layerX;
mouse.y = typeof e.offsetY === 'undefined' ? e.offsetY : e.layerY;
});
tmp_canvas.addEventListener('mousedown', function (e) {
tmp_canvas.addEventListener('mousemove', onLine);
mouse.x = typeof e.offsetX === 'undefined' ? e.offsetX : e.layerX;
mouse.y = typeof e.offsetY === 'undefined' ? e.offsetY : e.layerY;
last_mouse.x = mouse.x;
last_mouse.y = mouse.y;
onLine();
});
tmp_canvas.addEventListener('mouseup', function () {
tmp_canvas.removeEventListener('mousemove', onLine);
// Writing down to real canvas now
context.drawImage(tmp_canvas, 0, 0);
// Clearing tmp canvas
tmp_context.clearRect(0, 0, tmp_canvas.width, tmp_canvas.height);
});
var onLine = function () {
// Tmp canvas is always cleared up before drawing.
tmp_context.clearRect(0, 0, tmp_canvas.width, tmp_canvas.height);
// Line
tmp_context.beginPath();
tmp_context.moveTo(last_mouse.x, last_mouse.y);
tmp_context.lineTo(mouse.x, mouse.y);
tmp_context.stroke();
tmp_context.closePath();
};
document.querySelector('#Rectangle').onchange() = function () {
if (this.checked)
shape = 'Rectangle';
tmp_canvas.style.display = 'block';
}
/* Mouse Capturing Work */
tmp_canvas.addEventListener('mousemove', function (e) {
mouse.x = typeof e.offsetX === 'undefined' ? e.offsetX : e.layerX;
mouse.y = typeof e.offsetY === 'undefined' ? e.offsetY : e.layerY;
});
tmp_canvas.addEventListener('mousedown', function (e) {
tmp_canvas.addEventListener('mousemove', onRect);
mouse.x = typeof e.offsetX === 'undefined' ? e.offsetX : e.layerX;
mouse.y = typeof e.offsetY === 'undefined' ? e.offsetY : e.layerY;
last_mouse.x = mouse.x;
last_mouse.y = mouse.y;
onRect();
});
tmp_canvas.addEventListener('mouseup', function () {
tmp_canvas.removeEventListener('mousemove', onRect);
// Writing down to real canvas now
context.drawImage(tmp_canvas, 0, 0);
// Clearing tmp canvas
tmp_context.clearRect(0, 0, tmp_canvas.width, tmp_canvas.height);
});
var onRect = function () {
// Rectangle
var x = Math.min(mouse.x, last_mouse.x);
var y = Math.min(mouse.y, last_mouse.y);
var width = Math.abs(mouse.x - last_mouse.x);
var height = Math.abs(mouse.y - last_mouse.y);
tmp_context.strokeRect(x, y, width, height);
};
document.querySelector('#Circle').onchange() = function () {
if (this.checked)
shape = 'Circle';
tmp_canvas.style.display = 'block';
}
/* Mouse Capturing Work */
tmp_canvas.addEventListener('mousemove', function (e) {
mouse.x = typeof e.offsetX === 'undefined' ? e.offsetX : e.layerX;
mouse.y = typeof e.offsetY === 'undefined' ? e.offsetY : e.layerY;
});
tmp_canvas.addEventListener('mousedown', function (e) {
tmp_canvas.addEventListener('mousemove', onCircle);
mouse.x = typeof e.offsetX === 'undefined' ? e.offsetX : e.layerX;
mouse.y = typeof e.offsetY === 'undefined' ? e.offsetY : e.layerY;
last_mouse.x = mouse.x;
last_mouse.y = mouse.y;
onCircle();
});
tmp_canvas.addEventListener('mouseup', function () {
tmp_canvas.removeEventListener('mousemove', onCircle);
// Writing down to real canvas now
context.drawImage(tmp_canvas, 0, 0);
// Clearing tmp canvas
tmp_context.clearRect(0, 0, tmp_canvas.width, tmp_canvas.height);
});
var onCircle = function () {
// Circle
var x = (mouse.x + last_mouse.x) / 2;
var y = (mouse.y + last_mouse.y) / 2;
var radius = Math.max(Math.abs(mouse.x - last_mouse.x), Math.abs(mouse.y - last_mouse.y)) / 2;
var sAngle = 0;
var eAngle = 2 * Math.PI;
tmp_context.beginPath();
tmp_context.arc(x, y, radius, sAngle, eAngle);
tmp_context.stroke();
tmp_context.closePath();
};
}());
</script>
Created temp canvas and I drew each circle, rectangle, and line. If I make it separately, then it works as I said. I want to combine them with radio buttons, but it didn't work.
Ex. If I click a line radio button, then only line is drawn. etc...
