CODEWITHSUNDEEP
javascriptandroidhtmlcanvasradio-button
Sam
Sam

Reputation: 2200

How to program javascript radio buttons

I have this piece of code that will eventually be a little drawing tool in which the user will be able switch between a pencil and an eraser. I am trying to program the eraser at the moment. However, if the user selects the eraser radio button and then selects the pencil radio button(deselects the eraser), the eraser does not 'turn off'.

This is all done with HTML's canvas element and the eraser takes advantage of:

        context.globalCompositeOperation="destination-out";

As the code below shows, I thought I might be able to go through and reverse some of the properties depending on which button was clicked, for instance changing the globalCompositeOperation to equal 'source-over' or another property of globalCompositeOperation, however as far as I know, once a property has been set for it the only way to change it is to reset the entire canvas, which would delete everything.

Then I thought I might be able to set the opacity of the brush using:

        context.globalAlpha=0;

so that when the pencil tool is selected the eraser tool still erases, but at 0% opacity, so it shouldn't do anything. Unfortunatly, none of this worked.

I'm self taught so although I know a moderate amount about the HTML canvas, I've found it difficult to learn about the JS side of programming radio buttons.

I guess my question is, if some code is activated through a radiobutton onclick event, how do I deactivate the code once the radiobutton is deselected.

Thanks to any suggestions, any help is wanted!

Here's my code: (sorry about the formatting, stack overflow didn't like my indents)

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="main">
    <div class="tools" style="position:fixed;">Pencil:<input type="radio" name="toolSelect" onclick="pencilCheck();" id="pencilSelect"></div>
    <div class="tools" style="position:fixed; left: 80px;">Rubber:<input type="radio" name="toolSelect" onclick="rubberCheck()" id="rubberSelect"></div>
    <canvas id="canvas">This is a web application, you need to update your browser.</canvas><!-- the canvas -->
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script>
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');

//Makes the canvas the size of the browser window
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;


context.fillStyle = "red";
context.fillRect(40,40,250,100);




function rubberCheck(){
var dragging = false;
var erase = function(rubber){
if(dragging){
context.beginPath();
context.arc(rubber.clientX, rubber.clientY, 10, 0, Math.PI*2);
context.fill();
context.globalCompositeOperation="destination-out";
    context.globalAlpha=1;      
    }
}

var click = function(rubber){
dragging = true;
erase(rubber);
}

var unclick = function(){
dragging = false;
}


canvas.addEventListener('mousedown', click);
canvas.addEventListener('mousemove', erase);
canvas.addEventListener('mouseup', unclick);

}

if(pencilCheck){
var dragging = false;
var erase = function(rubber){
if(dragging){
context.beginPath();
context.arc(rubber.clientX, rubber.clientY, 10, 0, Math.PI*2);
context.fill();
context.globalCompositeOperation="destination-over";
context.globalAlpha=0;
}
}

var click = function(rubber){
dragging = true;
erase(rubber);
}

 var unclick = function(){
dragging = false;
}


canvas.addEventListener('mousedown', click);
canvas.addEventListener('mousemove', erase);
canvas.addEventListener('mouseup', unclick);

}


    </script>
</body>

Upvotes: 0

Views: 431

Answers (1)

RobG
RobG

Reputation: 147353

You have:

> <input type="radio" name="toolSelect" onclick="pencilCheck();" id="pencilSelect">

but there is no pencilCheck function. Later there is:

> if (pencilCheck) {

The function should probably be called "setTool" or similar. Pass a reference to the button that was clicked to the function using this and add a value attribute that is the tool that the button represents:

<input type="radio" ... value="pencil" onclick="setTool(this);" ...>

Then set the value of a variable to indicate the selected tool, say selectedTool:

// Initial state is no tool selected (?)
var selectedTool = null;

function setTool(el) {
  if (el.checked) selectedTool = el.value;
}

Do the same with other radio buttons so selectedTool always represents the currently checked checkbox. Note that you have a reset button, you need to add a listener so when it's clicked you reset the value of selectedTool (that can use a click listener on the button or a reset listener on the form, if you're using a form, but you don't seem to be using one).

Upvotes: 1

Related Questions