Paint app with canvas

Question

I'm trying to follow this tutorial http://www.williammalone.com/articles/create-html5-canvas-javascript-drawing-app/ to make a very simple painting app for a friend's website.

Here is what I wrote; I thought it would work but it doesn't :

<head>
    <script>
        window.onload = function()
        {
            var canvasDiv = document.getElementById('canvasDiv');
            canvas = document.createElement('canvas');
            canvas.setAttribute('width', canvasWidth);
            canvas.setAttribute('height', canvasHeight);
            canvas.setAttribute('id', 'canvas');
            canvasDiv.appendChild(canvas);
            if(typeof G_vmlCanvasManager != 'undefined') {
                canvas = G_vmlCanvasManager.initElement(canvas);
            }
            context = canvas.getContext("2d");

            //
            $('#canvas').mousedown(function(e){
              var mouseX = e.pageX - this.offsetLeft;
              var mouseY = e.pageY - this.offsetTop;

              paint = true;
              addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop);
              redraw();
            });

            $('#canvas').mousemove(function(e){
              if(paint){
                addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop, true);
                redraw();
              }
            });       

            $('#canvas').mouseup(function(e){
              paint = false;

            });

            $('#canvas').mouseleave(function(e){
              paint = false;
            });

            var clickX = new Array();
            var clickY = new Array();
            var clickDrag = new Array();
            var paint;

            function addClick(x, y, dragging)
            {
              clickX.push(x);
              clickY.push(y);
              clickDrag.push(dragging);
            }

            function redraw(){
              context.clearRect(0, 0, context.canvas.width, context.canvas.height); // Clears the canvas

              context.strokeStyle = "#df4b26";
              context.lineJoin = "round";
              context.lineWidth = 5;

              for(var i=0; i < clickX.length; i++) {        
                context.beginPath();
                if(clickDrag[i] && i){
                  context.moveTo(clickX[i-1], clickY[i-1]);
                 }else{
                   context.moveTo(clickX[i]-1, clickY[i]);
                 }
                 context.lineTo(clickX[i], clickY[i]);
                 context.closePath();
                 context.stroke();
              }
            }
        }
    </script>
</head>

<body>
    <div id="canvasDiv">        
    </div>
</body>

Could someone help me? I might have missed something.. Thank you !

Answer 1

Where did you define

canvasWidth and canvasHeight ?

If you set these it works: JSFIDDLE

eg

canvas.setAttribute('width', "500");
canvas.setAttribute('height', "200");

Tested in Chrome.. (and as you use jQuery you maybe should "execute" on $(document).ready() instead of onload to make sure "canvasDiv" is already rendered)

Answer 2

Here is what I changed :

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
   <head>
       <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script>
        var canvasDiv = document.getElementById('canvasDiv');
        var canvas = document.createElement('canvas');
        canvas.setAttribute('width', "500");
        canvas.setAttribute('height', "200");
        canvas.setAttribute('id', 'canvas');
        canvasDiv.appendChild(canvas);
        if(typeof G_vmlCanvasManager != 'undefined') {
            canvas = G_vmlCanvasManager.initElement(canvas);
        }
        context = canvas.getContext("2d");

        //
        $('#canvas').mousedown(function(e){
            var mouseX = e.pageX - this.offsetLeft;
            var mouseY = e.pageY - this.offsetTop;

            paint = true;
            addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop);
            redraw();
        });

        $('#canvas').mousemove(function(e){
            if(paint){
                addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop, true);
                redraw();
            }
        });       

        $('#canvas').mouseup(function(e){
            paint = false;

        });

        $('#canvas').mouseleave(function(e){
            paint = false;
        });

        var clickX = new Array();
        var clickY = new Array();
        var clickDrag = new Array();
        var paint;

        function addClick(x, y, dragging)
        {
            clickX.push(x);
            clickY.push(y);
            clickDrag.push(dragging);
        }

        function redraw(){
            context.clearRect(0, 0, context.canvas.width,                       
            context.canvas.height); // Clears the canvas

            context.strokeStyle = "#df4b26";
            context.lineJoin = "round";
            context.lineWidth = 5;

            for(var i=0; i < clickX.length; i++) {        
                context.beginPath();
                if(clickDrag[i] && i){
                    context.moveTo(clickX[i-1], clickY[i-1]);
                }else{
                    context.moveTo(clickX[i]-1, clickY[i]);
                }
                context.lineTo(clickX[i], clickY[i]);
                context.closePath();
                context.stroke();
            }
        }
        </script>
   </head>
   <body>
        <div id="canvasDiv"></div>      
   </body>  
</html>

Paint app with canvas

Question

2 answers

solution1
2 ACCPTED 2014-03-18 12:06:37

solution2
0 2014-03-18 19:09:56

Paint app with canvas

Question

2 answers

solution1 2 ACCPTED 2014-03-18 12:06:37

solution2 0 2014-03-18 19:09:56

solution1
2 ACCPTED 2014-03-18 12:06:37

solution2
0 2014-03-18 19:09:56