Reading list Switch to dark mode

    HTML5 Simple Draw Board

    Updated 16 July 2021

    HTML5 Simple Draw Board – During our brain storming session a question just popped out regarding HTML5 canvas element so i thought i should have create some app to show the demo of HTML5 canvas property . here is the simple demo

    HTML5 Simple Draw Board

    Canvas is a brilliant property in html5 where user can draw with many more options like gradient , colours brushes and many more .

    <script src=""></script>
    <script type="text/javascript">
    var canvas = document.getElementById('canvas');
    var context = null;
    var gradient = null;
    //context.clearRect = to remove from canvas
    context = canvas.getContext('2d');
    $('#canvas').mousedown(function( evt ){
    var offset = $('#canvas').offset();
    context.moveTo(evt.pageX - offset.left,;
    var offset = $('#canvas').offset();
    context.lineTo(evt.pageX - offset.left,;
    alert('canvas does not support');
    <canvas id="canvas" width="300" height="250"
     style="border:1px solid #d3d3d3;"></canvas>

    Most of the element are self explanatory

    for drawing purpose i used jquery functions like mousedown(), mousemove() and mouseup().

    Start your headless eCommerce
    Find out More
    . . .

    Leave a Comment

    Your email address will not be published. Required fields are marked*

    Be the first to comment.

    Back to Top

    Message Sent!

    If you have more details or questions, you can reply to the received confirmation email.

    Back to Home