canvas demo

In this example below you will see how to do a canvas demo with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by -HAN-, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright -HAN- ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>canvas demo</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <canvas id="canvas1"></canvas>
<canvas id="canvas2"></canvas>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/-HAN-/canvas-demo-ZYwPqB */
canvas{
  display:block;
  position:absolute;
  left:0;
  top:0;
}

/*Downloaded from https://www.codeseek.co/-HAN-/canvas-demo-ZYwPqB */
  // creating canvas
  var canvas1 = document.getElementById('canvas1');
	var canvas2 = document.getElementById('canvas2');
  //document.body.appendChild(canvas);	
	canvas1.width = 500;
	canvas1.height = 500 ;
	canvas2.width = 500;
	canvas2.height = 500 ;
	canvas1.style.border = "1px solid #d0d0d0";
	canvas2.style.border = "1px solid #d0d0d0";
  var ctx = canvas1.getContext('2d');
	var ctx2 = canvas2.getContext('2d');
	var allParticles = 500 ;
	var particleArr = [] ;
  
  // creating particles 


		/*ctx2.fillStyle="#ff0000";
		ctx2.fillRect(0,0,100,100);*/

		ctx2.font="50px Impact";
		ctx2.fillStyle = "#f39";
		ctx2.fillText("Hola",200 ,canvas2.height/2);


	// particle object
  function Particle(x,y,size){
    this.x = x ;
    this.y = y ;
    this.size = size ;
  }


	// particle formation
	Particle.prototype.particleFormation = function(){
    	ctx.beginPath();
      ctx.fillStyle = "#222222";
    	ctx.arc(this.x, this.y, this.size, 2*Math.PI, false );
    	ctx.fill();
      ctx.closePath();
  	};

	// particle position and size setting
	for(var i = 0 ; i<allParticles; i++){
    var posX = randomify(500);
    var posY = randomify(500);
    var posSize = randomify(8);
    var part = new Particle(posX, posY, posSize);
    particleArr.push(part);
    console.log(posX);
  }
 
	


	// showing particles
	for(var j = 1 ; j<=particleArr.length; j++){
    particleArr[j].particleFormation();
  }


alert('asdf');

	function randomify(value){
    return( Math.round( Math.random()* value ) )
  };

	




// text canvas
	/*ctx2.font = "30px Arial";
	ctx2.fontStyle = "red";
	ctx2.fillText('HI',0,0);*/
	


  // motion of particles

Comments