Canvas- Make Graphical Buttons by a Function

Written by @m_k_amin 30 June 2013

When HTML5 Canvas element is used, there is no way to define HTML standard form elements; so if you need a button you can not create it easily. The following code is a function for creating buttons inside HTML5 Canvas element. You can set filling Style of the button when the mouse cursor comes in, goes out and when the button is pressed. It is also possible to define button text, its font style and color. If the text is bigger than the button width, it is automatically adjusted. If you fill that simple colors are boring, no problem, define a gradient and put it as the button color. A function name and its arguments can passed into the button creation function; so when the button is pressed, it will get ran. You can easily add different features to the function below, but if you are a beginner, leave the function definition codes and just learn how to use it. Enjoy!

Code Snippet:

                                                <!-- this script is provided by coded by: Kerixa Inc. -->
<canvas id="myCanvas" width="400" height="230" onmousemove="DrawAll(event)" onmousedown="mouse(event,1)" onmouseup="mouse(event,0)"></canvas>
    var cnv = document.getElementById('myCanvas')
    var ctx = cnv.getContext('2d')
    var deg = Math.PI/180
	var RadGrad= ctx.createRadialGradient(70, 45, 1, 20, 45, 180)
	RadGrad.addColorStop(0, "rgba(1, 150, 225, 0.5)")
	RadGrad.addColorStop(0.33, "rgba(2, 30, 225, 0.9)")
	RadGrad.addColorStop(0.66, "rgba(78, 1, 225, 0.9)")	
	RadGrad.addColorStop(1, "rgba(155, 1, 225, 0.5)")

function DrawAll(e){
	ctx.clearRect(0,0, cnv.offsetWidth, cnv.offsetHeight)
	CreateButton(20,20,100,50, 'OK', "20pt serif", 'fnc', 'OK is pressed!', 'lightblue', RadGrad, 'lightgray', 'brown', e)
	CreateButton(150,20,70,100, 'Cancel', "20pt serif", 'fnc', 'Cancel is Pressed!', 'darkblue', 'brown', 'lightblue', 'yellow', e)
	CreateButton(20,140,250,80, 'Done', "40pt serif", 'fnc', 'Done is Pressed!', '#2DC399', 'darkgreen', '#EED3F1', 'magenta', e)	

function fnc(msg)
	document.getElementById('tDiv').innerHTML= msg

// Don't change these:
var mp=0, ff=0
function CreateButton(x, y, w, h, txt, fontStyle, clickFuncName, args, clrIn, clrOut, clrClick, txtClr, event){
	var rw= w/5, rh= h/3
	var txtClr2= txtClr
	ctx.moveTo(x+rw, y)
	ctx.lineTo(x+w-rw, y)
	ctx.quadraticCurveTo(x+w, y, x+w, y+rh)
	ctx.lineTo(x+w, y+h-rh)
	ctx.quadraticCurveTo(x+w, y+h, x+w-rw, y+h)
	ctx.lineTo (x+rw, y+h)
	ctx.quadraticCurveTo(x, y+h, x, y+h-rh)
	ctx.lineTo(x, y+rh)
	ctx.quadraticCurveTo(x, y, x+rw, y)
	if (event!=null){
		if (!IsInPath(event)){ 
			ctx.fillStyle= clrOut
			if (mp==0){
				ctx.fillStyle= clrIn
				if (ff==1) ff=2
				ctx.fillStyle= clrClick
				txtClr2= clrClick
	} else 
		ctx.fillStyle= clrOut
	ctx.strokeStyle= 'black'
   	ctx.font= fontStyle
	ctx.textAlign= 'left'
	ctx.textBaseline= 'middle'
	if (tw>(w-10)) tw= w-10	
	ctx.fillStyle= txtClr2
	ctx.strokeStyle= txtClr
    ctx.fillText(txt, x+w/2 -tw/2, y+h/2, tw)	
    ctx.strokeText(txt, x+w/2 -tw/2, y+h/2, tw)	
	if (ff==2){
		executeFunctionByName(clickFuncName,window, args)
function IsInPath(event) {
	var bb, x, y
	bb = cnv.getBoundingClientRect()
	x = (event.clientX-bb.left) * (cnv.width/bb.width)
	y = ( * (cnv.height/bb.height)
	return ctx.isPointInPath(x,y)
function mouse(e,s){
function executeFunctionByName(functionName, context /*, args */) {
  var args =;
  var namespaces = functionName.split(".");
  var func = namespaces.pop();
  for(var i = 0; i < namespaces.length; i++) {
    context = context[namespaces[i]];
  return context[func].apply(this, args);
<div id="tDiv" style="color: #2D3AC3; font-size: large">Event</div>

<div style="text-align: left"><font face="Tahoma"><br><a target="_blank" href=""><span style="font-size: 8pt; text-decoration: none">HTML5 Free Code</span></a></font></div>
</body><a target='_blank' href='' style='font-size: 8pt; text-decoration: none'>Html5 Free Codes</a>                                                


About @m_k_amin

This user is pending a biography.



Here you can leave us commments. Let us know what you think about this code tutorial!

0 / 300

Online Users: 12
Recent Members: FOTPU
advertisement 2