JSFiddle - React, Tailwind, and code Playground

by orthosie

HTML

<h1>
Mouse Draw
</h1>
<div class="canvas" id="draw-area">

</div>

CSS

body {
  /*background: url(http://wallpapercave.com/wp/HCKDboy.png) repeat;*/
}

#draw-area {
  width: 100%;
  height: 100%;
}

JavaScript

var flag = 0;
var element = document.getElementById("draw-area");
element.style.color = "red";    
element.addEventListener("mousedown", function(){
    flag = 0;
}, false);
element.addEventListener("mousemove", function(){
    flag = 1;
}, false);
element.addEventListener("mouseup", function(){
    if(flag === 0){
        //alert("click");
    }
    else if(flag === 1){
        //alert("drag");
    }
}, false);


function Line(cor) {
   this.x1 = cor.x1;
   this.y1 = cor.y1;
   this.x2 = cor.x2;
   this.y2 = cor.y2;
   //alert(cor.y2);
}


function Box(cor) {
   this.x1 = cor.x1;
   this.y1 = cor.y1;
   this.x2 = cor.x2;
   this.y2 = cor.y2;
   //alert(cor.y2);
}

Box.prototype.to_buffer = function(buffer)
{
   for ( i = this.x1; i < this.x2; i++)
   {
       buffer[i][this.y1] = "-";
       buffer[i][this.y2] = "-";
   }
   for ( i = this.y1; i < this.y2 -1 ; i++)
   {
       buffer[this.x1][i] = "|";
       buffer[this.x2][i] = "|";
   }
}

Box.prototype.to_html = function(ctx)
{
   var pre = document.createElement('pre');
   for ( i = this.x1; i < this.x2 - 1; i++)
   {
       pre.appendChild(document.createTextNode("-");
   }
   for ( i = this.y1 ; i < this.y2 -1 ; i++)
   {
       pre.appendChild(document.createTextNode("|");
   } 
}

}
Box.prototype.to_canvas = function(ctx)
{
  //ctx.font="20px Georgia";
  
   for ( i = this.x1; i < this.x2 - 1; i++)
   {
       ctx.fillText("-",i,this.y1);
       ctx.fillText("-",i,this.y2);
   }
   for ( i = this.y1 ; i < this.y2 -1 ; i++)
   {
       ctx.fillText("|",this.x1,i);
       ctx.fillText("|",this.x2,i);   
   }
}

var ctx=element.getContext("2d");
var cor = {x1: "10",y1: "10",x2: "100", y2: "100"};
var box = new Box(cor);
box.to_html(ctx);