2
\$\begingroup\$

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
\$\endgroup\$
2
  • \$\begingroup\$ I have also tried: contextVar.strokeRect(pointsArr[pointsArrPosition.x] = x,pointsArr[pointsArrPosition.y] = y,pointsArr[pointsArrPosition.w] = w,pointsArr[pointsArrPosition.h] = h); the result is the same. \$\endgroup\$
    – MystD
    Aug 5, 2015 at 10:18
  • 1
    \$\begingroup\$ Could you post an SSCCE? \$\endgroup\$
    – Anko
    Aug 7, 2015 at 10:19

1 Answer 1

1
\$\begingroup\$

I wasen't able to get the array working so I bypassed it and got it working by adding contextVar.strokeRect(filledCircle.x,filledCircle.y,filledCircle.w,filledCircle.h); to the addFilledCircleFunc.

// 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){
    //alert('works2');
var filledCircle = new pointObject;
    filledCircle.x = x;
    filledCircle.y = y;
    filledCircle.w = w;
    filledCircle.h = h;
    filledCircle.fill = fill;
    //pointsArr.push(filledCircle);

    contextVar.strokeRect(filledCircle.x,filledCircle.y,filledCircle.w,filledCircle.h);
    contextVar.fill(fill);
    //alert('works');
}

//Objects end

// create circle on mouse clicked point while mousebutton is held
var addPointToCanvasVar = function (e) {
    if(mouseButtonHeld){
        //alert('addpointfunc');
        addFilledCircleFunc(e.clientX, e.clientY, 10, 10, '#121212');




        /* // 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);
    addPointToCanvasVar(e); // add point on first click, not just when mousebutton is held
    mouseButtonHeld = true;

}

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(x,y,w,h){
    alert('drawing');
    contextVar.strokeRect(x,y,w,h);
}

/*
function draw(){
    alert('drawing');
    contextVar.strokeRect(pointsArr[pointsArrPosition.x] = x,pointsArr[pointsArrPosition.y] = y,pointsArr[pointsArrPosition.w] = w,pointsArr[pointsArrPosition.h] = h);
    pointsArrPosition++;
} */

//draw function end
\$\endgroup\$
3
  • 1
    \$\begingroup\$ How did this solve your problem? \$\endgroup\$ Aug 9, 2015 at 0:29
  • \$\begingroup\$ I'm not really sure but I think it was the backup of an older version of the script that was still in the index.html. I forgot that // doesn't work in html so it screwed with the new script file. But I made so many changes that I can't tell anymore if that was the only problem. \$\endgroup\$
    – MystD
    Aug 10, 2015 at 10:29
  • 1
    \$\begingroup\$ @MystD, it's not an answer unless it tells us how you solved the problem :/ \$\endgroup\$
    – Lucien
    Dec 4, 2015 at 6:35

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .