call a function onclick a button in html5

Question

I want to call a function by touching a button in HTML5. I haveange in a canvas drawn a rect.

Here is my code:

<body>
<canvas id="canvas" width="200" height="300"></canvas>
<button id="as" type="button">Left</button></body>
<script>
    var inc=10;
    var c=document.getElementById("canvas");
    ctx = c.getContext("2d");
    ctx.fillRect(x,0,150,75);
    function moveLeft(){ x+=inc }
</script>

So what have you tried? Attaching event handlers is a too broad topic to be correctly taught on a Q&A site. You can expect some c.onclick = moveLeft; answers, but don't listen to them. Please read through this MDN tutorial. — kapa
– kapa, Commented May 17, 2012 at 10:38
i want to move canvas by touching on button.like ontouch.rectangle move by 10px — Laxmi Kant
– Laxmi Kant, Commented May 17, 2012 at 10:38
I recommend to read quirksmode.org/js/introevents.html to learn the basics about events and event handling. — Felix Kling
– Felix Kling, Commented May 17, 2012 at 10:42

Sheepy · Accepted Answer · 2012-05-17 10:53:20Z

2

Since you mentioned 'touch', I guess we'll need a timer. The canvas draw routine also need some fixing. Here is my version:

<html><body>
<canvas id="canvas" width="200" height="300" style='border:1px solid black'></canvas>
<button id="as" type="button" onmouseover='startMove()' onmouseout='stopMove()'>Left</button></body>
<script>
    var c=document.getElementById("canvas");
    var ctx = c.getContext("2d");
    var inc = 10;
    var timer = 0;
    var x = 100;
    function moveLeft(){ if ( x > 0 ) x-=inc; drawCtx(); }
    function drawCtx(){ ctx.clearRect(0,0,200,300); ctx.fillStyle='black'; ctx.fillRect(x,0,50,75); }
    function startMove(){ stopMove(); timer = setInterval(moveLeft, 1000);  }
    function stopMove(){ clearInterval(timer); }
    drawCtx();
</script>

What this do is when you mouse over it will start calling moveLeft once per second (1000ms interval) until you move away the mouse.

Code is not nice, but it works and I hope it is simple enough to get the point across.

answered May 17, 2012 at 10:53

Sheepy

18.1k4 gold badges49 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

pomeh Over a year ago

touch === timer ? I don't understand it

Sheepy Over a year ago

@pomeh: Not exactly. But I guess the intent is to move a box as long as the mouse keep touching the button, in which case we need an interval timer or some alternatives (such as the new requestAnimationFrame) to keep it moving.

pomeh Over a year ago

Ok I see. Well, for me touching a button was more about touch events, but we don't have enough information about that know more. @LaxmiKant what is the intent ?

Laxmi Kant Over a year ago

i want to move canvas by touching that button in mobile(Android)

Sheepy Over a year ago

@LaxmiKant: I see. Android is another matter, this is an important point that should be marked in the question (and tagged) as well. I haven't tried but if mouseover/mouseout doesn't work you can try those real touch events or use mousedown / mouseup instead, I am out of time to test it on Android for the moment.

|

scessor · Accepted Answer · 2012-05-17 11:14:25Z

Here an example moving all directions and border checking:

HTML:

<canvas id="canvas"></canvas><br>
<button type="button" onclick="moveRect(0, -10);">move up</button><br>
<button type="button" onclick="moveRect(-10, 0);">move left</button>
<button type="button" onclick="moveRect(+10, 0);">move right</button><br>
<button type="button" onclick="moveRect(0, +10);">move down</button>

JS:

var c = null, ctx = null, x = 0, y = 0;
var width = 150, height = 75;

function moveRect(x2, y2) {
    ctx.clearRect(x, y, width, height);
    x += x2;
    if (x < 0) x = 0;
    else if (x > c.width - width) x = c.width - width;
    y += y2;
    if (y < 0) y = 0;
    else if (y > c.height - height) y = c.height - height;
    ctx.fillRect(x, y, width, height);
}

window.onload = function() {
    c = document.getElementById("canvas");
    ctx = c.getContext("2d");
    x = 0;
    moveRect(0, 0);
}

CSS:

#canvas {
    width: 200;
    height: 300px;
    border: 1px solid red;
}

Also see this example.

Adil · Accepted Answer · 2012-05-17 11:01:29Z

0

You can to give fill style to make your rectangle visible or draw it border. Secondly you want to attach event to button to move the rectangle drawn on canvas. The could be done by this code and could mold the code according to your need. Demo on JsFiddle using Javascript and Demo on JsFiddle using jQuery

x =200;
$('#as').click(function()
{    
    var inc=10;
    var c=document.getElementById("canvas");
    //c.style.backgroundColor = "#ff0000";
    ctx = c.getContext("2d");    


    ctx.fillStyle="#ff0000";    
    ctx.fillRect(x+5,0,15,75);


    ctx.fillStyle="#ffffff";    
    ctx.fillRect(x,0,15,75);
    x-=5;
}
);

edited May 17, 2012 at 11:01

answered May 17, 2012 at 10:50

Adil

148k25 gold badges217 silver badges207 bronze badges

1 Comment

Adil Over a year ago

Thanks for reminding and I modified my answer I hope its ok now.

Collectives™ on Stack Overflow

call a function onclick a button in html5

3 Answers 3

6 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related