CODEWITHSUNDEEP
javascriptcanvas
daisy
daisy

Reputation: 675

Canvas - How to save user input in an object?

I have a application, where users can draw strokes on the canvas. How can I save the input, so that it is repainted after I cleared the canvas to erease for example rects that have been added. I used an array but it really takes long after a while to repaint all the array entries.

my code to realize strokes look similar to this: http://jsfiddle.net/FgNQk/1/

var points[];
 var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var width  = window.innerWidth;
var height = window.innerHeight;
canvas.height = height;
canvas.width = width;
canvas.addEventListener('mousedown', function(e) {
    this.down = true;   
    this.X = e.pageX ;
    this.Y = e.pageY ;
    this.color = rgb();
}, 0);
canvas.addEventListener('mouseup', function() {
    this.down = false;          
}, 0);
canvas.addEventListener('mousemove', function(e) {

    if(this.down) {
         with(ctx) {
            beginPath();
            moveTo(this.X, this.Y);
            lineTo(e.pageX , e.pageY );
            strokeStyle = "rgb(0,0,0)";
            ctx.lineWidth=1;
            stroke();

            // saving via array
             if (this.down) {

             points.push({x:e.pageX,y:e.pageY});

     }
         }
         this.X = e.pageX ;
         this.Y = e.pageY ;
    }
}, 0);

Upvotes: 2

Views: 277

Answers (1)

GameAlchemist
GameAlchemist

Reputation: 19294

You need to build several abstraction layers to avoid major headache in your code.

I just built a small 'Drawer' class which keep the user context, to remember what is he drawing, color, ... and the current list of all drawn things. Then you need some classes to store line, rect, ... data

On each move of the mouse, the whole scene gets redrawn, which will works fast enough on most devices/browser i think.

http://jsfiddle.net/ZS34V/1/

var Drawer = function () {
  this.currentFigureType = 0 ;  // 0 : free draw, 1 : line,
                              // 2 : square, ...
  this.currentFigure = null  ;  
  this.figures       = [] ;
  this.currentColor  = 0  ;
  this.startX        = 0  ;
  this.startY        = 0  ;       
  this.lastX        = 0  ;
  this.lastY        = 0  ;       
  this.mouseDown     = false;  }

Drawer.prototype.draw = function(ctx) {
    var figuresArray = this.figures;
    for (var i=0, len=figuresArray.length; i < len; i++) {
        figuresArray[i].draw(ctx);
    }
 }

And now on the mouse up/down/move, we will check the context and act accordingly : start a new figure on mousedown, update it on mousemove, and store it on mouseup.

canvas.addEventListener('mousedown', function(e) {
        myDrawer.startX = e.pageX  ;
        myDrawer.startY = e.pageY  ;
        myDrawer.mouseDown = true ;

        switch (myDrawer.currentFigureType) {
          case  0 : break;
           case 1 : break ;
        }

    }, 0);

 canvas.addEventListener('mouseup', function() {
        myDrawer.mouseDown = false
        switch (myDrawer.currentFigureType) {
          case  0 : break;
          case 1 :  var newLine = new Line(myDrawer.currentColor,
                                            myDrawer.startX,
                                            myDrawer.startY,
                                            myDrawer.lastX,
                                            myDrawer.lastY);
                    myDrawer.figures.push(newLine);
                    break ;
        }

}, 0);


canvas.addEventListener('mousemove', function(e) {

  if(!myDrawer.mouseDown) { return }

  myDrawer.lastX = e.pageX; 
  myDrawer.lastY=e.pageY;

  ctx.clearRect(0,0,width, height);
  myDrawer.draw(ctx);
  switch (myDrawer.currentFigureType) {
          case  0 :   // draw + store point
                    break;
           case 1 :
             with(ctx) {
                 console.log('we here');
                        beginPath();
                        moveTo(myDrawer.startX, myDrawer.startY);
                        lineTo(e.pageX , e.pageY );
                        strokeStyle = myDrawer.currentColor;
                        ctx.lineWidth=1;
                        stroke();
                     }
                    break;
            }
    }, 0);

Upvotes: 1

Related Questions