JSFiddle - React, Tailwind, and code Playground

by lee2808

HTML

<script src="http://i43.tinypic.com/fcmwx2.png"></script>

JavaScript

window.addEventListener('load',OnLoad,false);
//------------------------------------------------------------
//Global variables

var canvas; 
var context
var curve;


//------------------------------------------------------------
function OnLoad(){
	
	CreateCanvas(800,600);

	curve = new Curve(0,0,canvas.width,canvas.height*0.5,"AddIMAGE.png");//Need to add an image
	context.lineWidth = 4;
	
	window.addEventListener('mousedown',mouseDown,false);
	window.addEventListener('mouseup',mouseUp,false);

	function mouseDown(e){
	
		curve.onMouseDown(e);
		
	}
	function mouseUp(e){
	
		curve.onMouseUp(e);
	}
	
	
	
	
	
	//Draw to canvas
	function draw(){
		
		requestAnimationFrame(draw)
		DrawBackground('#8c0000');
		curve.draw(context);
	}	
	//------------------------------------------------------------
	
	requestAnimationFrame(draw);
}	
function CreateCanvas(pWidth,pHeight){

	 //Create the canvas
	canvas = document.createElement('canvas');
	canvas.width = pWidth;
	canvas.height = pHeight;
	document.body.appendChild(canvas);
	
	//Create context
	context = canvas.getContext('2d');
}
//------------------------------------------------------------
function DrawBackground(pColor){
	
	context.save();
	context.fillStyle = pColor;
	context.fillRect(0,0,canvas.width,canvas.height);
	context.restore();
}

var Curve = (function(){
	function Curve(startX,startY ,endX,endY,imagePath){
	
	
		this.setStartPoint(startX,startY);
		this.setEndPoint(endX,endY);
		this.setPointImage(imagePath);
		this.setPointArray();
		
	}

	Curve.prototype.setEndPoint = function(pX,pY){
		this.mEndPoint = new Vector2(pX,pY);
	};
	Curve.prototype.getEndPoint = function(){
		return this.mEndPoint;
	};
	Curve.prototype.setPointImage = function(pImagePath){
		this.mImage = new Image();
		this.mImage.src = pImagePath;
	};
	Curve.prototype.getPointImage = function(){
		return this.mImage;
	};
	Curve.prototype.setPointArray = function(){
		this.mPointArray = new Array();
	
	};
	Curve.prototype.setStartPoint =...