1
\$\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\$
  • \$\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 '15 at 10:18
  • 1
    \$\begingroup\$ Could you post an SSCCE? \$\endgroup\$ – Anko Aug 7 '15 at 10:19
0
\$\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\$
  • 1
    \$\begingroup\$ How did this solve your problem? \$\endgroup\$ – Seth Battin Aug 9 '15 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 '15 at 10:29
  • 1
    \$\begingroup\$ @MystD, it's not an answer unless it tells us how you solved the problem :/ \$\endgroup\$ – Lolums Dec 4 '15 at 6:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.