CODEWITHSUNDEEP
javascripthtmlcanvas
Nathan Chan
Nathan Chan

Reputation: 303

Make Canvas Act as a Button

What I want is for there to be a button, and the background of the button to be a canvas. This is my button code:

//Lets create a simple particle system in HTML5 canvas and JS

//Initializing the canvas
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

//Canvas dimensions
var W = 500; var H = 500;

//Lets create an array of particles
var particles = [];
for(var i = 0; i < 50; i++)
{
	//This will add 50 particles to the array with random positions
	particles.push(new create_particle());
}

//Lets create a function which will help us to create multiple particles
function create_particle()
{
	//Random position on the canvas
	this.x = Math.random()*W;
	this.y = Math.random()*H;
	
	//Lets add random velocity to each particle
	this.vx = Math.random()*20-10;
	this.vy = Math.random()*20-10;
	
	//Random colors
	var r = Math.random()*255>>0;
	var g = Math.random()*255>>0;
	var b = Math.random()*255>>0;
	this.color = "rgba("+r+", "+g+", "+b+", 0.5)";
	
	//Random size
	this.radius = Math.random()*20+20;
}

var x = 100; var y = 100;

//Lets animate the particle
function draw()
{
	//Moving this BG paint code insde draw() will help remove the trail
	//of the particle
	//Lets paint the canvas black
	//But the BG paint shouldn't blend with the previous frame
	ctx.globalCompositeOperation = "source-over";
	//Lets reduce the opacity of the BG paint to give the final touch
	ctx.fillStyle = "rgba(0, 0, 0, 0.3)";
	ctx.fillRect(0, 0, W, H);
	
	//Lets blend the particle with the BG
	ctx.globalCompositeOperation = "lighter";
	
	//Lets draw particles from the array now
	for(var t = 0; t < particles.length; t++)
	{
		var p = particles[t];
		
		ctx.beginPath();
		
		//Time for some colors
		var gradient = ctx.createRadialGradient(p.x, p.y, 0, p.x, p.y, p.radius);
		gradient.addColorStop(0, "white");
		gradient.addColorStop(0.4, "white");
		gradient.addColorStop(0.4, p.color);
		gradient.addColorStop(1, "black");
		
		ctx.fillStyle = gradient;
		ctx.arc(p.x, p.y, p.radius, Math.PI*2, false);
		ctx.fill();
		
		//Lets use the velocity now
		p.x += p.vx;
		p.y += p.vy;
		
		//To prevent the balls from moving out of the canvas
		if(p.x < -50) p.x = W+50;
		if(p.y < -50) p.y = H+50;
		if(p.x > W+50) p.x = -50;
		if(p.y > H+50) p.y = -50;
	}
}

setInterval(draw, 33);
//I hope that you enjoyed the tutorial :)
<button align=center>
<canvas id="canvas"></canvas>
      <span id="submit">Submit</span>

  </button>

For some reason, the button is huge, and I don't know why, but also, I want my text to be on top of the canvas. How can I do that?

Upvotes: 0

Views: 89

Answers (1)

Max Sindwani
Max Sindwani

Reputation: 1267

You need to specify the size of the canvas. You can do so by setting the width and height of the canvas to a fixed value via attributes i.e <canvas width="50" height="50"></canvas>. The drawing is bound by the width and height variables which you may like to alter as well. As for the text, it needs to be positioned on top of the canvas using absolute positioning. Alternatively, you could draw text on the canvas directly. Note that you can use a canvas without the button and then register a click event handler on the canvas to simulate a button instead.

https://jsfiddle.net/684vtxm1/

Upvotes: 1

Related Questions