art program

you draw with it

by mrcrazypants987

HTML

<body onload ="startArt()">


<style>
canvas {
    border: 1px solid #d3d3d3;
    background-color: #f1f1f1;
}
</style> 
  

<input type="text"id = "brushSize"> 
<input type="color" id="brushcolor">





<script>
  var brush;
  
  function startArt() {
  brush =  new component(30,30,"black",10,20);
  paper.start();

  }
  

  
  // the canvas object
  var paper={
     canvas : document.createElement("canvas"),
       start : function() {
        this.canvas.width = 550;
        this.canvas.height = 500;
        this.context = this.canvas.getContext("2d");
        document.body.insertBefore(this.canvas, document.body.childNodes[0]);
        this.interval = setInterval(updateCanvas, 5);
           window.addEventListener('mousemove', function (e) {
            paper.x = e.pageX;
            paper.y = e.pageY;
        })
       window.addEventListener('mousedown',function () {
        brush.toggled = true
        })
             window.addEventListener('mouseup',function () {
        brush.toggled = false  })
        
          window.addEventListener('keydown',function () {
        brush.erase = true
        })
             window.addEventListener('keyup',function () {
        brush.erase = false  })
        
    }, clear : function(){
        this.context.clearRect(brush.x, brush.y, brush.width, brush.height);
    }    
  
  }


//component constructor
  	function component(width, height, color, x, y,toggled,erase) 
  {
    this.width = width;
    this.height = height;
    this.x = x;
    this.y = y;
    this.toggled = toggled;
    this.erase = erase;
    this.update = function()
    {
        ctx = paper.context;
        ctx.fillStyle =this.color;
        ctx.fillRect(this.x, this.y, this.width, this.height);
    } 
  }
  
   	function updateCanvas()
{
brush.width = document.getElementById("brushSize").value;
brush.height = document.getElementById("brushSize").value;
brush.color =document.getElementById("brushcolor").value;
if (brush.toggled==true){

if (paper.x...