Skip to content

Instantly share code, notes, and snippets.

@vinvin27

vinvin27/gist:6fa7f0b3f30d49e7d7f903847a0531e1

Created May 29, 2017 16:05
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save vinvin27/6fa7f0b3f30d49e7d7f903847a0531e1 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save vinvin27/6fa7f0b3f30d49e7d7f903847a0531e1 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. vinvin27 created this gist May 29, 2017.
    101 changes: 101 additions & 0 deletions gistfile1.txt
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,101 @@
    var ctx, color = "#000";
    $(document).ready(function () {

    // reset palette selection (css) and select the clicked color for canvas strokeStyle
    $(".palette").click(function(){
    $(".palette").css("border-color", "#777");
    $(".palette").css("border-style", "solid");
    $(this).css("border-color", "#fff");
    $(this).css("border-style", "dashed");
    color = $(this).css("background-color");
    ctx.beginPath();
    ctx.strokeStyle = color;
    });

    // link the new button with newCanvas() function
    $("#new").click(function() {
    newCanvas();
    });
    });
    // function to setup a new canvas for drawing
    function newCanvas(){
    //define and resize canvas
    $("#content").height($(window).height()-90);
    var canvas = '<canvas id="canvas" width="'+$(window).width()+'" height="'+($(window).height()-90)+'"></canvas>';
    $("#content").html( canvas );

    // setup canvas
    ctx=document.getElementById("canvas").getContext("2d");
    ctx.strokeStyle = color;
    ctx.lineWidth = 5;

    // setup to trigger drawing on mouse or touch
    $("#canvas").drawTouch();
    $("#canvas").drawPointer();
    $("#canvas").drawMouse();
    }
    // prototype to start drawing on touch using canvas moveTo and lineTo
    $.fn.drawTouch = function() {
    var start = function(e) {
    e = e.originalEvent;
    ctx.beginPath();
    x = e.changedTouches[0].pageX;
    y = e.changedTouches[0].pageY-44;
    ctx.moveTo(x,y);
    };
    var move = function(e) {
    e.preventDefault();
    e = e.originalEvent;
    x = e.changedTouches[0].pageX;
    y = e.changedTouches[0].pageY-44;
    ctx.lineTo(x,y);
    ctx.stroke();
    };
    $(this).on("touchstart", start);
    $(this).on("touchmove", move);
    };

    // prototype to start drawing on pointer(microsoft ie) using canvas moveTo and lineTo
    $.fn.drawPointer = function() {
    var start = function(e) {
    e = e.originalEvent;
    ctx.beginPath();
    x = e.pageX;
    y = e.pageY-44;
    ctx.moveTo(x,y);
    };
    var move = function(e) {
    e.preventDefault();
    e = e.originalEvent;
    x = e.pageX;
    y = e.pageY-44;
    ctx.lineTo(x,y);
    ctx.stroke();
    };
    $(this).on("MSPointerDown", start);
    $(this).on("MSPointerMove", move);
    };
    // prototype to start drawing on mouse using canvas moveTo and lineTo
    $.fn.drawMouse = function() {
    var clicked = 0;
    var start = function(e) {
    clicked = 1;
    ctx.beginPath();
    x = e.pageX;
    y = e.pageY-44;
    ctx.moveTo(x,y);
    };
    var move = function(e) {
    if(clicked){
    x = e.pageX;
    y = e.pageY-44;
    ctx.lineTo(x,y);
    ctx.stroke();
    }
    };
    var stop = function(e) {
    clicked = 0;
    };
    $(this).on("mousedown", start);
    $(this).on("mousemove", move);
    $(window).on("mouseup", stop);