CODEWITHSUNDEEP
javascriptjqueryhtml
Thanus
Thanus

Reputation: 461

Javascript: Where do i begin in creating different brush and pencil types for my online web drawing app

I want to create an online drawing tool, such as sketch pad by sketch io, i already have the basics of creating simple line.

var colorPurple = "#cb3594";
var colorGreen = "#659b41";
var colorYellow = "#ffcf33";
var colorBrown = "#986928";

var curColor = colorPurple;
var clickColor = new Array();

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

    function redraw(){
      /* context.strokeStyle = "#df4b26"; */
      context.lineJoin = "round";
      context.lineWidth = 5;

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

My question now is where do i begin now if i want to make more tools such as brushes, stamps, blur tool ? Is there any tutorial, i need a starting direction.

Upvotes: 0

Views: 576

Answers (1)

toto1911
toto1911

Reputation: 491

A good starting point could be this article : http://perfectionkills.com/exploring-canvas-drawing-techniques/

There are lots of examples for many different brushes and drawing techniques

Another one : http://www.williammalone.com/articles/create-html5-canvas-javascript-drawing-app/

I'm sure you will find more articles on the subject :)

If you want to implement an Undo/Redo system, you should also check this one : https://www.codicode.com/art/undo_and_redo_to_the_html5_canvas.aspx

Good luck, and keep us posted about your progressions / research ;)

Upvotes: 1

Related Questions