I've started with the canvas paint tutorial from link which worked fine with a few problems that can be fixed later. I've been checking a lot of posts on drawing shapes on the canvas but they all use draw functions in a gameloop or intervals but I do not want to use draw(); in an interval or gameloop for now, I just need to update the content on userinput.
I am trying to create a drawing software that paints objects instead of just bitmaps. I've been debugging for a while now and can't find the problem: I have problems accessing the objects in the pointsArr[]; array. I was only able to add rectangles to the screen by using contextVar.strokeRect(50,50,50,50); directly with the mouseDownVarso far.
Yes I know that the addFilledCircleFunc creats rectangles, for now I just want everything to work properly.
// to do:
// add gameloop and draw with gameloop?
// stroke line in resize fix
// collission check + detection objects
// functions to draw detection objects
// implement resize?
// Varibale declration
var canvasVar = document.getElementById('canvasHtmlElement');
var contextVar = canvasVar.getContext('2d');
var pointRadiusVar = 10;
var mouseButtonHeld = false;
var pointsArrPosition = 0;
//Arrays
var pointsArr = [];
// Varibale declration end
//canvas setup
canvasVar.width = window.innerWidth;
canvasVar.height = window.innerHeight;
//canvas setup end
//resize fix
window.onresize = function(){
var tempImageVar = contextVar.getImageData(0,0, canvasVar.width, canvasVar.height);
canvasVar.width = window.innerWidth;
canvasVar.height = window.innerHeight;
contextVar.putImageData(tempImageVar, 0,0);
}
//resize fix end
contextVar.lineWidth = pointRadiusVar * 2; // Line Width
//functions
// Objects
function pointObject () {
this.x = 0;
this.y = 0;
this.w = 10; // default width and height?
this.h = 10;
this.fill = '#444444';
this.stroke=stroke||"skyblue";
this.strokewidth=strokewidth||2;
}
function addFilledCircleFunc(x, y, w, h, fill){
var filledCircle = new pointObject;
filledCircle.x = x;
filledCircle.y = y;
filledCircle.w = w;
filledCircle.h = h;
filledCircle.fill = fill;
pointsArr.push(filledCircle);
}
//Objects end
// create circle on mouse clicked point while mousebutton is held
var addPointToCanvasVar = function (e) {
if(mouseButtonHeld){
addFilledCircleFunc(e.clientX, e.clientY, 10, 10, '#444444');
/* // old drawing code
contextVar.lineTo(e.clientX, e.clientY);
contextVar.stroke();
contextVar.beginPath();
contextVar.arc(e.clientX, e.clientY, pointRadiusVar, 0, Math.PI * 2);
contextVar.fill();
contextVar.beginPath();
contextVar.moveTo(e.clientX, e.clientY);
*/
}
};
// MAKE SURE that lines work when drawn over the edge of the canvas
/*
function clearPathIfMouseCursorLeavesCanvasFunc(e){
//contextVar.beginPath(); // clears the path so buttonpresses dont connect the line
//mouseButtonHeld = false;
}
*/
// end
// mouse Up/Down Switch
var mouseDownVar = function(e){
alert("mouseDown");
//contextVar.strokeRect(e.clientX, e.clientY,50,50);
draw();
mouseButtonHeld = true;
addPointToCanvasVar(e); // add point on first click, not just when mousebutton is held
}
var mouseUpVar = function(){
//alert("mouseUp");
mouseButtonHeld = false;
contextVar.beginPath(); // clears the path so buttonpresses dont connect the line
}
// mouse Up/Down Switch end
//functions end
//listeners
canvasVar.addEventListener('mousemove', addPointToCanvasVar);
canvasVar.addEventListener('mouseup', mouseUpVar);
canvasVar.addEventListener('mousedown', mouseDownVar);
//canvasVar.addEventListener ('mouseout', clearPathIfMouseCursorLeavesCanvasFunc);
//listeners end
//draw function
function draw(){
alert('drawing');
contextVar.strokeRect(pointsArr[pointsArrPosition].x,pointsArr[pointsArrPosition].y,pointsArr[pointsArrPosition].w,pointsArr[pointsArrPosition].h);
pointsArrPosition++;
}
//draw function end
