5/19/2011

Simple HTML5 Drawing App + Saving The Files With Ajax

This is a simple drawing board app that allows user draw on a canvas, pick several brush sizes and colors and save his image (I'll leave part of the last to you).

You can see how this app works live on the Draw a Robot site. It uses HTML5 canvas and works in all modern browsers except Internet Explorer.

Some important parts of the javascript code are taken from this tutorial. William's app is more impressive. Mine is simpler and aims to explain it in understandable way (William's tutorial is a bit complex). Let's start:

Creating the canvas

<canvas id="drawingCanvas" width="550" height="450" style="border:1pt solid black;margin:auto;cursor:crosshair;clear:both;">
</canvas>


If you don't care about Internet explorer, that's it. We just add some styling to it and make the cursor crossed.

Create the brush sizes and color selectors


<div style="float:left;">Colors:</div> <a href="#" class="colorPicker" onclick="setColor('#FFF');return false;" style="background:#FFF;">&nbsp;</a>
<a class="colorPicker" href="#" onclick="setColor('#000');return false;" style="background:#000;">&nbsp;</a>
<a class="colorPicker" href="#" onclick="setColor('#FF0000');return false;" style="background:#FF0000;">&nbsp;</a>
<a class="colorPicker" href="#" onclick="setColor('#00FF00');return false;" style="background:#00FF00;">&nbsp;</a>
<a class="colorPicker" href="#" onclick="setColor('#0000FF');return false;" style="background:#0000FF;">&nbsp;</a>
<a class="colorPicker" href="#" onclick="setColor('#FFFF00');return false;" style="background:#FFFF00;">&nbsp;</a>
<a class="colorPicker" href="#" onclick="setColor('#00FFFF');return false;" style="background:#00FFFF;">&nbsp;</a>

<div style="clear:both;">&nbsp;</div>

<div style="float:left;">Sizes:</div>
<a href="#" class="colorPicker" onclick="setSize(2);return false;" style="width:2px;height:2px;margin-left:15px;">&nbsp;</a>
<a href="#" class="colorPicker" onclick="setSize(5);return false;" style="width:5px;height:5px;margin-left:15px;">&nbsp;</a>
<a href="#" class="colorPicker" onclick="setSize(10);return false;" style="width:10px;height:10px;margin-left:15px;">&nbsp;</a>
<a href="#" class="colorPicker" onclick="setSize(25);return false;" style="width:25px;height:25px;margin-left:15px;">&nbsp;</a>

<div style="clear:both;">&nbsp;</div>

<p style="clear:both;"><input type="button" value="Clear Canvas" onclick="clearCanvas();">
<input type="button" value="Save My Drawing" onclick="centerElt('saveDrawing',400,300);"></p>


This code adds size selection buttons, color selectiors, and button for saving.

Obviously you can use better CSS to save some code.

Note that Save my drawing users a function that is not published here to keep things simpler. It centers a popup on the screen. You can find or code such function yourself, or simply display the saving form under the canvas without fancy effects. (Let me know in the comments if you need clarification.

The save form

The save form is not important for this tutorial either. You can see the one at the Draw a Robot site, but the form can contain any fields you wish. Maybe image name, description, author name and so on.

The Javascript

After opening a javascript tag, you'll need the following code. I'll input all the explanations to it as javascript comments so you can directly copy the code and use it.

Please note: the javascript below depends on jQuery! If you don't store local copy of jQuery, you need to insert this code in the header of your page:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>

Now your javascript follows:

<script type="text/javascript">
/* some code used from http://www.williammalone.com/articles/create-html5-canvas-javascript-drawing-app/ */

/* Some global initializations follow. The first 2 arays will store all mouse positions 
on X and Y, the 3rd one stores the dragged positions. 
The variable paint is a boolean, and then follow the default values 
which we use to start */
var clickX = new Array();
var clickY = new Array();
var clickDrag = new Array();
var paint;
var defaultColor="#000";
var defaultShape="round";
var defaultWidth=5;

// creating the canvas element
var canvas = document.getElementById('drawingCanvas');

if(canvas.getContext) 
{
    // Initaliase a 2-dimensional drawing context
    var context = canvas.getContext('2d');
    
    // set the defaults
    context.strokeStyle = defaultColor;
    context.lineJoin = defaultShape;
    context.lineWidth = defaultWidth;
}

// binding events to the canvas
$('#drawingCanvas').mousedown(function(e){
  var mouseX = e.pageX - this.offsetLeft;
  var mouseY = e.pageY - this.offsetTop;
  
  paint = true; // start painting
  addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop);

  // always call redraw
  redraw();
});

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

// when mouse is released, stop painting, clear the arrays with dots
$('#drawingCanvas').mouseup(function(e){
  paint = false;
  
  clickX = new Array();
  clickY = new Array();
  clickDrag = new Array();
});

// stop painting when dragged out of the canvas
$('#drawARobot').mouseleave(function(e){
  paint = false;
});

// The function pushes to the three dot arrays
function addClick(x, y, dragging)
{
  clickX.push(x);
  clickY.push(y);
  clickDrag.push(dragging);
}

// this is where actual drawing happens
// we add dots to the canvas
function redraw(){
    
  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();
  }
}

// this is called when "clear canvas" button is pressed
function clearCanvas()
{
    // both these lines are required to clear the canvas properly in all browsers
    context.clearRect(0,0,canvas.width,canvas.height);
    canvas.width = canvas.width;
    
    // we need to flush the arrays too
    clickX = new Array();
    clickY = new Array();
    clickDrag = new Array();
}

/* Two simple functions, they just assign the selected color and size 
to the canvas object properties */ 
function setColor(col)
{
    context.strokeStyle = col;
}

function setSize(px)
{
    context.lineWidth=px;
}

/* Finally this will send your image to the server-side script which will 
save it to the database or where ever you want it saved.
Note that this function should be called when the button in your save 
form is pressed. The variable frm is the form object. 
Basically the HTML will look like this:
<input type="button" value="Save Drawing" onclick="saveDrawing(this.form);">
 */
function saveDrawing(frm)
{       
    // converting the canvas to data URI
    var strImageData = canvas.toDataURL();  
        
    $.ajax({
        url: "", /* You need to enter the URL of your server side script*/
        type: "post",
          /* add the other variables here or serialize the entire form. 
          Image data must be URI encoded */
        data: "save=1&pic="+encodeURIComponent(strImageData), 
        success: function(msg)
        {
           // display some message and/or redirect
        }
    });
}

Your server side script

It really depends on you. In the Draw a Robot site we just save the robots to the database and then display them in a gallery. You can save the image data in a blob field in the DB. Just have in mind that data / URI images are displayed with the following HTML code:

<img src="encoded image data">

237 comments:

  1. Replies
    1. Hey I just wanted to say that I really enjoyed reading your blog. You have good views, keep up the good informative info. Good Quality and very informative Blog! Contact Vinay Hari Education Consultant

      Delete
  2. cool
    but trying to understand the script
    because i am having some errors in my facebook apps

    make a facebook application

    ReplyDelete
  3. Nice post. Parents are parents, not Gods. Of course they cannot have all the answers. The way you explain things to your kids should do all the work…it all comes under parenthood and your people skills.

    ReplyDelete
  4. hi, how do i save to database? using phpmysql, what params do i set my form?

    thanks for great script

    ReplyDelete
  5. This is actually quite wrong - why do you remember every single point you need to draw and redraw ALL of them after every single movement? All you need to remember is last point and if button was down at that point, then move/draw from last to current point. You don't need to remember all points and you definetly don't need redraw them over and over again.

    ReplyDelete
  6. Good overview, Lee. Using a tool such as can be helpful in assessment and identifying areas of need.

    Website Development company

    ReplyDelete
  7. You will discover some fascinating points in time in this post but I don’t know if I see all of them interior to heart. I am learning great extra challenging on distinct blogs everyday. Lots of people will be benefited from your writing. Cheers!

    Press Release Writers
    Press Release Writing Service

    ReplyDelete
  8. Just like what your website title is. This is really cool. Write something on web development Philippines next time. Thank you.

    ReplyDelete
  9. paint for mac MyBrushes paint for Mac app is the best Mac paint software to paint on Mac infinite canvas and PLAYBACK drawing Paintbrush for Mac.It's good as ms Paint for Mac
    Drawing App MyBrushes is the Best drawing app for ipad to paint on infinite canvas and PLAYBACK each drawing stroke on iPad, iPhone. Download best drawing app for iPad Now.
    avi to mp4 converter Total Video Converter, a very powerful Avi to Mp4 Video Converter, convert any video files to avi, 3gp, mp4, psp, iPod, iPhone, flv, DVD, VCD...

    ReplyDelete
  10. Thanks for a great information in your blog.I have read all the post of your blog.Great work on PHP

    ReplyDelete
  11. Thanks for the great information in your blog PHP

    ReplyDelete
  12. Great..You have clearly explained about Simple HTML5 Drawing App + Saving The Files With Ajax..Its very easy to understand..Keep on sharing..
    PHP training in chennai

    ReplyDelete
  13. Thanks for sharing this informative information...You may also refer....
    How to migrate from a typical HTML4 page to a typical HTML5 page.
    www.s4techno.com/blog/2016/08/30/html5-migration/

    ReplyDelete


  14. Thank you for the info. It sounds pretty user friendly. I guess I’ll pick one up for fun. thank u

    iPad Service Center in Chennai - Service Locations

    ReplyDelete
  15. Thanks for sharing this informative information...You may also refer....
    oracle training in chennai

    ReplyDelete
  16. Thanks for your information and valuable time . Great article. much more helpful to all.
    Android Training in chennai

    ReplyDelete
  17. This comment has been removed by the author.

    ReplyDelete
  18. Needed to compose you a very little word to thank you yet again regarding the nice suggestions you’ve contributed here.
    mean-stack-training-institute-in-chennai

    ReplyDelete
  19. Thank you for this post. Thats all I are able to say. You most absolutely have built this blog website into something speciel. You clearly know what you are working on, youve insured so many corners.thanks
    java training in annanagar | java training in chennai

    java training in marathahalli | java training in btm layout

    java training in rajaji nagar | java training in jayanagar

    ReplyDelete
  20. This comment has been removed by the author.

    ReplyDelete
  21. Thanks Admin for sharing such a useful post, I hope it’s useful to many individuals for developing their skill to get good career.
    java training in chennai | java training in bangalore

    java online training | java training in pune

    ReplyDelete
  22. Thank you a lot for providing individuals with a very spectacular possibility to read critical reviews from this site.

    angularjs Training in online

    angularjs Training in bangalore

    angularjs Training in bangalore

    angularjs Training in btm

    ReplyDelete
  23. I prefer to study this kind of material. Nicely written information in this post, the quality of content is fine and the conclusion is lovely. Things are very open and intensely clear explanation of issues

    Data Science course in kalyan nagar | Data Science course in OMR
    Data Science course in chennai | Data science course in velachery
    Data science online course | Data science course in jaya nagar

    ReplyDelete
  24. I am really happy with your blog because your article is very unique and powerful for new reader.
    Click here:
    Selenium Training in Chennai | Selenium Training in Bangalore | Selenium Training in Pune | Selenium online Training

    ReplyDelete
  25. Good Post! Thank you so much for sharing this pretty post, it was so good to read and useful to improve my knowledge as updated one, keep blogging.
    python online training
    python training in OMR
    python training course in chennai

    ReplyDelete
  26. I am really very happy to find this particular site. I just wanted to say thank you for this huge read!! I absolutely enjoying every petite bit of it and I have you bookmarked to test out new substance you post.

    angularjs-Training in tambaram

    angularjs-Training in sholinganallur

    angularjs-Training in velachery

    angularjs Training in bangalore

    angularjs Training in bangalore

    ReplyDelete
  27. And indeed, I’m just always astounded concerning the remarkable things served by you. Some four facts on this page are undeniably the most effective I’ve had.
    safety courses in chennai

    ReplyDelete
  28. Resources like the one you mentioned here will be very useful to me ! I will post a link to this page on my blog. I am sure my visitors will find that very useful
    python training institute in marathahalli | python training institute in btm | Data Science training in Chennai

    ReplyDelete

  29. It seems you are so busy in last month. The detail you shared about your work and it is really impressive that's why i am waiting for your post because i get the new ideas over here and you really write so well.

    Selenium training in Chennai
    Selenium training in Bangalore
    Selenium training in Pune
    Selenium Online training
    Selenium training in bangalore

    ReplyDelete
  30. I usually read them, take what I think is useful, what tool may suit me, and try to be creative about it in order to fit my needs.

    Many times things are oriented towards others things that I'm interested in.

    But may I say, I found the approach of this article uniquely outstanding. Speaks to me plain, simple, expressing ideas without the need of "marketing induced words" which do not mean nothing unless you unwrap them.https://nareshit.in/html-javascript-training/

    ReplyDelete
  31. This comment has been removed by the author.

    ReplyDelete
  32. Thank you for allowing me to read it, welcome to the next in a recent article. And thanks for sharing the nice article, keep posting or updating news article.
    apple service center chennai
    apple service center in chennai
    apple mobile service centre in chennai
    apple service center near me

    ReplyDelete
  33. Thank your valuable content.we are very thankful to you.one of the recommended blog.which is very useful to new learners and professionals.content is very useful for hadoop learners


    Best Spring Online Training Institute
    Best Devops Online Training Institute
    Best Datascience Online Training Institute
    Best Oracle Online Training Institute
    Best AWS Online Training Institute

    ReplyDelete
  34. It is a great post. Keep sharing such kind of useful information.

    englishlabs
    Guest posting sites

    ReplyDelete

  35. Thank you for sharing the article. The data that you provided in the blog is informative and effective. Best Devops Training Institute

    ReplyDelete
  36. Great post i must say thanks for the information you added to this post. I appreciate your post and looking forward for more.

    ExcelR Data Science in Bangalore

    ReplyDelete




  37. You might comment on the order system of the blog. You should chat it's splendid. Your blog audit would swell up your visitors. I was very pleased to find this site.I wanted to thank you for this great read!!

    DATA SCIENCE COURSE MALAYSIA

    ReplyDelete
  38. very helpful information sharing...

    ReplyDelete
  39. I really enjoy simply reading all of your weblogs. Simply wanted to inform you that you have people like me who appreciate your work. Definitely a great post. Hats off to you! The information that you have provided is very helpful.
    www.technewworld.in
    How to Start A blog 2019
    Eid AL ADHA

    ReplyDelete
  40. Bonus jackpot bisa anda dapatkan di situs ini dengan membeli jackpot senilai Rp1.000 pada setiap putarannya. Nikmati bonus sampai jutaan rupiah dengan mendapatkan kartu kriteria jackpot
    asikqq
    dewaqq
    sumoqq
    interqq
    pionpoker
    bandar ceme terbaik
    hobiqq
    paito warna terlengkap
    syair sgp

    ReplyDelete
  41. Awesome blog. I enjoyed reading your articles. This is truly a great read for me. I have bookmarked it and I am looking forward to reading new articles. Keep up the good work!
    data analytics course malaysia

    ReplyDelete
  42. I love your article so much. Good job
    Participants who complete the assignments and projects will get the eligibility to take the online exam. Thorough preparation is required by the participants to crack the exam. ExcelR's faculty will do the necessary handholding. Mock papers and practice tests will be provided to the eligible participants which help them to successfully clear the examination.

    Excelr Solutions

    ReplyDelete
  43. Hey Nice Blog!! Thanks For Sharing!!! Wonderful blog & good post. It is really very helpful to me, waiting for a more new post. Keep Blogging ! Here is the best
    angularjs online training with free Bundle videos .

    contact No :- 9885022027.
    SVR Technologies


    ReplyDelete
  44. Thanks for sharing
    Sanjary kids is the best playschool, preschool in Hyderabad, India. Start your play school,preschool in Hyderabad with sanjary kids. Sanjary kids provides programs like Play group,Nursery,Junior KG,Serior KG,and Teacher Training Program.
    play school in hyderabad, India
    Preschool in hyderabad, India
    Preschool teacher training course in hyderabad, India
    pre and primary teacher training course in hyderabad,India
    early childhood teacher training course in hyderabad, India

    ReplyDelete
  45. I am happy for sharing on this blog its awesome blog I really impressed. thanks for sharing.

    Became an Expert In Cloud Computing Security Training! Learn from experienced Trainers and get the knowledge to crack a coding interview, @Softgen Infotech Located in BTM Layout.

    ReplyDelete
  46. I have to search sites with relevant information on given topic and provide them to teacher our opinion and the article.

    digital marketing course

    For more info :
    ExcelR - Data Science, Data Analytics, Business Analytics Course Training in Mumbai

    304, 3rd Floor, Pratibha Building. Three Petrol pump, Opposite Manas Tower, LBS Rd, Pakhdi, Thane West, Thane, Maharashtra 400602
    18002122120

    ReplyDelete
  47. Thanks for sharing such a great information..Its really nice and informative..

    python data science tutorial

    ReplyDelete
  48. Pretty article! I found some useful information in your blog, it was awesome to read, thanks for sharing this great content to my vision, keep sharing...

    big data hadoop training

    ReplyDelete
  49. Effective blog with a lot of information. I just Shared you the link below for ACTE .They really provide good level of training and Placement,I just Had HTML Classes in ACTE , Just Check This Link You can get it more information about the HTML course.
    Java training in chennai | Java training in annanagar | Java training in omr | Java training in porur | Java training in tambaram | Java training in velachery

    ReplyDelete
  50. Wow What A Nice And Great Article, Thank You So Much for Giving Us Such a Nice & Helpful Information about Java, keep sending us such informative articles I visit your website on a regular basis.Please refer below if you are looking for best Training Center.
    Java training in chennai | Java training in annanagar | Java training in omr | Java training in porur | Java training in tambaram | Java training in velachery

    ReplyDelete
  51. Thanks for your Guidance...The Concept of the Topics and way of Explanation's is very Good...Your Effective Works clear all My Queries...Good Job
    Java training in chennai | Java training in annanagar | Java training in omr | Java training in porur | Java training in tambaram | Java training in velachery

    ReplyDelete
  52. This comment has been removed by the author.

    ReplyDelete
  53. Such an excellent and interesting blog, do post like this more with more information, this was very useful. Salesforce Training Canada   

    ReplyDelete
  54. This comment has been removed by the author.

    ReplyDelete
  55. This comment has been removed by the author.

    ReplyDelete
  56. I was just browsing through the internet looking for some information and came across your blog. I am impressed by the information that you have on this blog. It shows how well you understand this subject. Bookmarked this page, will come back for more....digital marketing courses bangalore

    ReplyDelete
  57. This comment has been removed by the author.

    ReplyDelete
  58. Amazing Article ! I would like to thank you for the efforts you had made for writing this awesome article. This article inspired me to read more. keep it up.
    Java Training in Chennai

    Java Training in Velachery

    Java Training in Tambaram

    Java Training in Porur

    Java Training in OMR

    Java Training in Annanagar



    ReplyDelete
  59. Thank you for sharing this useful article with us. This blog is a very helpful to me in future. Keep sharing informative article.
    Php Training Course

    https://www.ahmedabadcomputereducation.com/course/php-training-course/

    ReplyDelete
  60. Great Article… I love to read your articles because your writing style is too good, its is very helpful for all of us and I never get bored while reading your article because, they are becomes a more and more interesting from the starting lines until the end.

    Data Science Training in Gurgaon
    Data Analytics Training in Gurgaon
    Selenium Training in Gurgaon

    ReplyDelete
  61. Thank you for sharing this useful article. This blog is a very helpful to me. Keep sharing informative articles with us.

    https://www.france-collectivites.fr/

    ReplyDelete
  62. Thank you for sharing this useful article with us. This blog is a very helpful to me. Keep sharing informative articles with us.

    https://www.sdsfin.in/services/project-finance-consultants-in-ahmedabad/

    ReplyDelete
  63. Its very informative blog and I am exactly looking this type of blog. Thank you for sharing this beautiful blog.

    https://superurecoat.com/titanium-iso-propoxide/

    ReplyDelete
  64. Amazing!!! This blog presents a very valuable information. Keep up the good work! Visit our website too. Thankyou!
    windows azure cloud computing training in bangalore

    ReplyDelete
  65. Hi! Thank you for the share this information. This is very useful information for online blog review readers. Keep it up such a nice posting like this.

    Data Science Training in Chennai

    Data Science Course in Chennai

    ReplyDelete
  66. Thank you for the great information. Keep Sharing it!

    https://saroitapes.com/

    ReplyDelete
  67. Thanks for sharing informative article.

    https://web30india.com/

    ReplyDelete
  68. Thanks For Sharing The Information The Information shared Is Very Valuable Please Keep Updating Us Time Just Went On reading The Article.




    ReplyDelete
  69. Excellent Article. Thank you for sharing!

    https://www.ahmedabadcomputereducation.com/
    https://www.ahmedabadcomputereducation.com/course/live-project-training-in-asp-net/
    https://www.ahmedabadcomputereducation.com/course/live-project-training-in-ios/
    https://www.ahmedabadcomputereducation.com/course/live-project-training-in-java/
    https://www.ahmedabadcomputereducation.com/course/live-project-training-in-android/
    https://www.ahmedabadcomputereducation.com/course/live-project-training-in-php/
    https://www.ahmedabadcomputereducation.com/course/live-project-training-in-python/

    ReplyDelete
  70. usefull article.thanks for sharing.we like your blog.thanks for sharing informative article.
    Best Home Loan Provider in Vadodara

    ReplyDelete
  71. This was an extremely wonderful post. Thanks for providing this info. akatsuki puffer jacket

    ReplyDelete
  72. It's late finding this act. At least, it's a thing to be familiar with that such events exist. I agree with your Blog and I will be back to inspect it more in the future so please keep up your act.
    data analytics training in hyderabad

    ReplyDelete
  73. The next time I read a blog, I hope that it doesnt disappoint me as much as this one. I mean, I know it was my choice to read, but I actually thought you have something interesting to say. All I hear is a bunch of whining about something that you could fix if you werent too busy looking for attention. data analytics course in surat

    ReplyDelete
  74. Thanks for this. This is the simplest explanation I can understand given the tons of Explanation here. Coco Miguel Hoodie

    ReplyDelete
  75. I’m happy I located this blog! From time to time, students want to recognize the keys of productive literary essays. Your first-class knowledge about this good post can become a proper basis for such people. nice one
    data analytics training in hyderabad

    ReplyDelete
  76. This blog caught my attention while browsing through the net. It has a good content about Search Engine Marketing in comparison to their antagonist. To know more do visit -
    Search Engine Marketing

    ReplyDelete
  77. Great Java tutorials shared here over. It will help many people to refresh their knowledge. Everyday is really an opportunity to learn something new. Therefore, we also provide Content Writing Course in Bangalore for better understanding of content writing. Don't hesitate to visit this page:
    Content Writing Course in Bangalore

    ReplyDelete
  78. Nice blog! Thanks for sharing this information. If you are interested in building a medical career but are struggling to clear medical entrance exams, Wisdom Academy is the right place to begin. It is one of Mumbai's best NEET coaching institutes for students preparing for medical and other competitive-level entrance examinations. The academy caters to home and group tuitions for NEET by professionals. It offers comprehensive learning resources, advanced study apparatus, doubt-clearing sessions, regular tests, mentoring, expert counseling, and much more. Enroll Now!
    NEET Coaching in Mumbai

    ReplyDelete
  79. Great content in a very descriptive manner. Thanks very much for sharing your rich experience. Your content is very neat and clean with subject centric. Great efforts. if someone is looking for Digital Marketing Course in France then follow the link and go through to get the entire details of the course and other courses as well. you can acquire great knowledge and expertise by joining for comprehensive course content.
    Digital marketing courses in france

    ReplyDelete
  80. I read your article and you have clearly explained Simple HTML5 drawing App and saving the files with ajax. Keep doing this good work. Digital marketing courses in Agra

    ReplyDelete
  81. Nice stuff that you have share with us about a simple drawing board app. This detailed and well explained article will help many learners to start creating their own canvas. Get also new skills with the Digital Marketing Courses in Delhi and understand the power of digital marketing. Read now:
    Digital Marketing Courses in Delhi

    ReplyDelete
  82. This is by far one of the most engaging articles I have read in recent times. Just loved the quality of information provided and I must say you have noted down the points very precisely, keep posting more.Digital Marketing is now booming at a rapid pace, especially in Dubai, and many are now searching for the courses. So to ease their work I am leaving a link below for those who are searching for Digital Marketing courses in Abu Dhabi. All the best and keep learning, thank you.
    Digital Marketing Courses in Abu Dhabi

    ReplyDelete
  83. Hi. I was browsing the net, when I came across this blog. Impressive, Well explained as well as used step by step detailing. Really useful for the newcomers.
    Digital marketing courses in Ghana

    ReplyDelete
  84. Excellent blog. Appreciate the efforts you have put. Thank you for sharing.
    Visit - Digital marketing courses in Singapore

    ReplyDelete
  85. I have read a lot of blogs on this topic, but I have got a clear understanding on this topic by reading this blog. This blog is really very informative, thanks for sharing.
    Digital marketing courses in Noida

    ReplyDelete
  86. Great tutorials about PHP shared over here. It must have been taken a lot of work to put it together. Keep up the good work. We also provide an informational and educational blog about Freelancing. Nowadays, many people want to start a Freelance Career without knowing How and Where to start. People are asking:
    What is Freelancing and How Does it work?
    How to Become a Freelancer?
    Is working as a Freelancer a good Career?
    How much can a Freelancer earn?
    Can I live with a Self-Employed Home Loan?
    What Kind of Freelancing Jobs can I find?
    Which Freelancers Skills are required?
    How to get Freelance projects?
    How Do companies hire Freelancers?
    In our Blog, you will find a guide with Tips and Steps which will help you to take a good decision. Do visit the blog:
    What is Freelancing

    ReplyDelete
  87. The article on PHP tutorials is really interesting and gives a lot of learning lessons from it. Keep sharing such relatable works. Digital Marketing courses in Bahamas

    ReplyDelete
  88. Well Said, you have furnished the right information that will be useful to anyone at all time. Thanks for sharing your Ideas. Digital marketing courses in Kota

    ReplyDelete
  89. Lee, thanks for the overview. Using a tool like can assist in assessing and identifying areas of need. Are you looking for the best financial modeling courses in India? This article lists the best colleges in India that provide financial modeling courses.
    Financial Modeling Courses in India

    ReplyDelete
  90. Such a great learning about a simple HTML5 Drawing App + Saving The Files With Ajax. Good to know that we can use this app to draw on a canvas, pick several brush sizes and colors and save his image. Thanks for sharing this tutorial. Keep up the good work. While people are looking for Best Digital Marketing Courses, we have set up a range of Digital Marketing Courses in Pune to allow people to attend courses which will meet their expectations. The Courses are ready-to-implement with constantly updated Curriculum, Practical-oriented Lessons, Interactive Classroom, Assignments and Case Studies, Master Certification, Affordable Pricing and Free Demo Session, Assistance for Placements and Internship. Ideal for Freshers and Job Seekers from any working area as well as Marketing Professionals. Small and Medium Business can also benefit hugely from the Digital Marketing Courses in Pune. Online Marketing Courses in Pune also available for Beginners, Intermediate and Advanced Learners. Start to learn today:
    Digital marketing courses in Pune

    ReplyDelete
  91. Very interesting blog. Really useful. I didn't knew about this app which can help on canvas. Really appreciate your efforts. Thanks
    Digital marketing courses in Chennai

    ReplyDelete
  92. The article on PHP tutorials is really interesting and technical. Keep up the good work by sharing such amazing post. Digital Marketing Courses in Faridabad

    ReplyDelete
  93. Quite an interesting article. I enjoyed reading it and I will try it also. Though I have multiple options and applications for the same purpose of drawing easily available. This hassle-free software does not require so much coding. I appreciate your hard work. Thanks very much. If anyone wants to build his carrier in Digital Marketing then you must go through our curriculum which is designed very professionally with cutting edge of the current requirement of the corporates and based on market trends. You will be taught in a highly professional environment with practical assignments. You can decide your specialized stream your own way by understanding each subject in depth under the guidance of highly professional and experienced trainers. For more detail Please visit at
    Digital Marketing Courses in Austria

    ReplyDelete
  94. Simple HTML5 Drawing App + Saving The Files With Ajax both the things have written very informative content. Looking forward to reading all your blogs. specially thanks for this blog.If you are looking for top 7 digital marketing courses institute in Bhutan with placement help here is the link given if you are interested in it. The link is-
    Digital marketing Courses in Bhutan

    ReplyDelete
  95. great php tutorial article, explained the topic very well gathered new info through this blog, nice effort. Digital marketing courses in Raipur

    ReplyDelete
  96. Thank you for introducing us to this fun and creative tool. It is such an easy-to-use application where we can sketch on canvas using different types of brushes and color and save our work as well.
    Data Analytics Courses In Kolkata

    ReplyDelete
  97. I really liked your blog post. Its is very well explained.
    Visit- Digital marketing courses in Auckland

    ReplyDelete
  98. Simple HTML5 Drawing App + Saving The Files With Ajax is wonderful title for this information. Thanks for Sharing This Article.It is very so much valuable content. I hope these Commenting lists will help to my websiteIf your are looking for professional courses after senior secondary here is the list of top 20 professional courses please check on this link - Professional Courses

    ReplyDelete
  99. I genuinely appreciate your help in coming up with such good articles and presenting them in such a great sequence. This article inspired me to read more. keep it up.if someone is looking for content writing courses in Delhi here is the list of top 9 courses available in this blog. Please check on this link - Content Writing Courses in Delhi

    ReplyDelete
  100. Simple HTML5 Drawing App + Saving The Files With Ajax is,In my opinion, this one is one of the best articles you have written so far. If someone is looking for data analytics courses in Indore then here is top 5 courses explained in this blog. Please check once for more information. Data Analytics Courses In Indore

    ReplyDelete
  101. Thanks for sharing the CSS code. I never knew we could create HTML5 with canva. This is something new. I have tried canva alone for the past year, and now after reading this, I will create one with it. Add more valuable content. I am looking forward to read more.
    Digital marketing courses in Nagpur

    ReplyDelete
  102. Article about Simple HTML5 Drawing App + Saving The Files With Ajax is wonderful. Thanks for sharing this article, the blog is very informative. If anyone wants to build his career in Digital Marketing then you must go through our curriculum. Digital Marketing Courses In Ireland

    ReplyDelete
  103. Wonderful blog with some great key points discussed in it. the blog is very enjoyable to read and is very informative. i appreciate the time and efforts made on this blog by the writer. keep up the good work. Digital Marketing Courses in Australia

    ReplyDelete
  104. Hi thank you for an excellent technical blog. The coding given by you is easy to understand and follow. This would help me in the drawing app at ease. The efforts put in by you would surely be paid off. Would like to read more of such blogs in the future.
    Data Analytics Courses In Kochi

    ReplyDelete
  105. Hi! I am really impressed with this blog. I am expecting you to share more interesting contents like this. If you are searching for data analytics courses in Agra, here is a list of the top five data analytics courses in Agra with practical training. Check out!
    Data Analytics Courses in Agra

    ReplyDelete
  106. This is wonderful explanation blog for simple html5 drawing app. This will be very useful for the developers who are seeking for the same. Thanks for sharing it with us! Data Analytics Courses in Gurgaon

    ReplyDelete
  107. Hey blogger, This is an amazing blog on Simple HTML5 Drawing App + Saving The Files With Ajax. Thanks for sharing in-depth and very insightful blog with us. Keep up the good work! Digital Marketing Courses in Vancouver

    ReplyDelete
  108. This article was really interesting to read and learning new things about PHP tutorials like HTML 5, Javascript. Keep up the good work. Data Analytics Courses in Delhi

    ReplyDelete
  109. Thank you providing this informative information. Also, the code you have shared is very useful. Keep sharing more knowledge like this.
    Data Analytics Courses In Nagpur

    ReplyDelete
  110. Great Blog thanks for sharing.. Simple HTML5 Drawing App Plus Saving The Files With Ajax was simply explained by you. It is pretty simple to comprehend. Continue sharing.
    Data Analytics Courses in Mumbai

    ReplyDelete
  111. Thanks for sharing your expertise about a simple HTML5 Drawing App and Saving the Files With Ajax. This is not the least easy subject to learn. However you was able to simplify everything so anyone can better understand. Thanks for this well explained work and keep it up. Everything you should know about Data Analytics Courses. Look at the Top Best Institutes for Data Analytics Courses In Nashik before enrolling in Data Analytics Courses. The detailed article provides an insight into the Courses modules, Tools covered, Courses Features, Course Duration and Courses Fees for Data Analytics Courses In Nashik. You will learn important skills and tools like Data Visualization, Statistics for Data, Excel Analytics, Python Programming, Big Data and Hadoop, Google Analytics, Basic and Advanced Excel, MySQL, Power BI, SAS, R Programming and more…
    Data Analytics Courses In Nashik

    ReplyDelete
  112. Wonderful and nice blog! We appreciate you letting us read such a wonderful essay. In addition, I believe you have shared all of your best information with us. I really appreciate this one.
    Data Analytics Courses In Coimbatore

    ReplyDelete
  113. Outstanding article. Thanks for giving a detailed explanation of how to draw on Canva and save the file in Ajax. The CSS code you have shared is easier to follow. The step-by-step Javascript is to the point, which helped to gather more understanding of the topic. I appreciate your effort. Thanks for the article, and keep on sharing. Courses after bcom

    ReplyDelete
  114. Good day! Fantastic and lovely blog! We are grateful that you allowed us to read such a fantastic essay. In addition, I think you've given us all of your best knowledge. This one, I truly appreciate you.
    financial modelling course in kenya

    ReplyDelete
  115. We appreciate you sharing this informative post with us. Continue providing us with helpful content.

    https://www.ownuxglobal.com/

    ReplyDelete
  116. Fantastic article. I appreciate your thorough description of how to create artwork on Canva and export it as an Ajax file. It is simpler to follow the CSS code that you shared. The concise and clear Javascript instructions helped to increase my understanding of the subject. I thank you for sharing this content. Do post more. Digital marketing courses in patna

    ReplyDelete
  117. Great convenient tool for canvas use using brush size, colour and portrait size etc. Truly great tip can be used with HTML5 and Java script to design. Thanks for sharing your great experience and hard work. If anyone wants to build his carrier in Digital Marketing then you must go through our curriculum which is designed very professionally with cutting edge of the current requirement of the corporates and based on market trends. For more detail Please visit at
    Digital marketing Courses In UAE

    ReplyDelete
  118. Very mindblowing blog. I start following this blog now on very useful content Data Analytics Courses In Vadodara 

    ReplyDelete
  119. I am really glad I found this blog - very useful HTML PHP tutorials. Keep sharing more useful tutorials. Digital marketing courses in Varanasi

    ReplyDelete
  120. Very interesting Php tutorials which are easier to follow. I really enjoyed reading it Data Analytics Courses in navi Mumbai 

    ReplyDelete
  121. Very impressive and masterfully written blog with fantastic topics covered. While reading, they find it entertaining. We appreciate the author's time and effort in creating this blog. Continue to post.
    Data Analytics Courses in Ghana

    ReplyDelete
  122. This article on Simple HTML5 Drawing App + Saving The Files With Ajax is quite amazing and extremely informative. Thank you for allowing us to read this fantastic piece of your work. Choose Data Analytics Courses in Coimbatore to advance your career and unlock many opportunities in today's modern world. More information is available at the given link. Data Analytics Courses In Coimbatore

    ReplyDelete
  123. I appreciate you giving this important CSS code information. We appreciate you teaching us how to use Canva to produce HTML5. What an incredible thing to learn. Include more worthwhile stuff. More reading will be exciting for me.
    financial modelling course in bangalore

    ReplyDelete
  124. Great article. Your clear explanation of creating artwork on Canva and exporting it as an Ajax file is appreciated. The CSS code that you gave is easier to follow. The clear and concise Javascript tutorials improved my grasp of the topic. I appreciate you for providing this information. Post more often. Financial modelling course in Singapore

    ReplyDelete
  125. Such a wonderful PHP blog. The blog is highly informative and interesting to me. I look forward to reading more fascinating blogs.
    financial modelling course in indore

    ReplyDelete
  126. Thank you for sharing this cool canvas tool using the brush, size, background. The tip shared in this content is helpful with HTML5 and JavaScript design in canvas. Individuals interested in studying Financial Modeling Courses in Toronto must visit our website, which gives a gist of the curriculums of the courses, top 6 institutes providing this course, etc. Get a comprehensive picture of the course in one stop that would help you to decide your specialized stream in your own way.
    Financial modeling courses in Toronto

    ReplyDelete
  127. Hello blogger,
    you have provided a good post. Actually your article about "Simple HTML5 Drawing App + Saving The Files With Ajax" is a great and useful one. Especially the part on creating the Canvas. Thanks for making the post.
    Data Analytics Courses in Zurich

    ReplyDelete
  128. Hello Blogger,
    your tutorial is a great. After reading it, I could not mentioned how useful it is; It is actually fantastic.
    data Analytics courses in thane

    ReplyDelete
  129. Informative article. The tutorial on the topic "Simple HTML5 Drawing App" is fascinating. The description of "Creating the Canva" is very well explained. I never knew we could use canva for drawing and later save the file in Ajax. The CSS and JS code shared are easy to follow and implement. I appreciate the blogger for their effort. Thanks for the post. Do continue to share more. Data Analytics courses in Leeds

    ReplyDelete
  130. It's really wonderful to know that we can now make our own canvas app! It's pretty awesome financial modelling course in gurgaon

    ReplyDelete
  131. Nice article, thanks for sharing this information with us. This content increasing the knowledge of the reader. Keep posting such wonderful blogs with us. Data Analytics courses in new york

    ReplyDelete
  132. That is a great method dear blogger. I found it interesting to read. It is a great tutorial, hope to get more next time again. Thanks!
    Data Analytics Course Fee

    ReplyDelete
  133. Fantastic post. The content discussed about "Simple HTML5 Drawing App" is outstanding. This article is handy and the information shared is so descriptive. After reading this blog, the learners will become curious and explore more about the topic. Thanks for providing the "Javascript and CSS" code. Foreseeing to learn more awesome content from your future blog posts. Keep sharing more. Data Analytics courses in Glasgow

    ReplyDelete
  134. Superb post. It's fascinating to read the instruction on the "Simple HTML5 Drawing App." The "Creating the Canva" explanation is stated clearly. I had yet to learn that we could draw using Canva and then save the file in Ajax. The unified CSS and JS code is simple to understand and use. For their efforts, the blogger has my appreciation. Thank you for sharing. Keep continuing to post more unique articles. Data Analytics Scope

    ReplyDelete
  135. Hello blogger,
    it is a great work you have done. I really find interesting to read. In fact the article on the drawing app and Ajax was quite interesting to follow.
    Business Analytics courses in Pune

    ReplyDelete
  136. Great article. The information presented in the "Simple HTML5 Drawing App" discussion is excellent. The advice provided in this post is valuable and very descriptive. After reading this blog, the students will grow intrigued and research the subject more. Thank you for giving me the "Javascript and CSS" code. I anticipate learning more excellent information from your upcoming blog posts. Don't stop sharing. Data Analyst Course Syllabus

    ReplyDelete
  137. Great post, highly appreciate your work. thanks for sharing this information with us. Business Analytics courses in Kolkata

    ReplyDelete
  138. An awesome read about drawing app like creating a canva. I am definitely gonna try this. Data Analyst Interview Questions 

    ReplyDelete
  139. Hi blogger,
    I was glad to find this tutorial. Actually the blog post you made in here is a great and useful one. It is clear enough to follow. As to Data analytics qualifications, there are important facts here. Data Analytics Qualifications

    ReplyDelete
  140. Hello blogger, your article is very interesting. I appreciate the efforts you have taken for this. Thank you and keep posting more such valuable blogs.
    Data Analytics VS Data Science

    ReplyDelete
  141. I was searching for this topic for a long time. I really needed this. I am very glad to find this post. Thank you for posting this Best Financial modeling courses in India

    ReplyDelete
  142. Hello blogger,
    that is a great tutorial. I was excited to discover it on this platform. I really like it. Thanks a lot.
    Best Business Accounting & Taxation Course in India

    ReplyDelete
  143. Hi, I must say that I am extremely glad to visit your blog. You have explained everything in a very simple manner, Good job!
    CA Coaching in Mumbai

    ReplyDelete
  144. Hello blogger,
    I just mean to say thank you for this kind article. Actually, your blog post is a great one, I like it as a tutorial. As to SEO best courses in. India, Kindly check this link. Best SEO Courses in India

    ReplyDelete
  145. Hi dear blogger,
    I was really please to read this blog post. In fact, your article on PHP tutorial is rich enough. You have done a perfect job. Thanks for all. Best Content Writing Courses in India

    ReplyDelete
  146. I wanted to do my own php coding to create canvas. thanks for sharing. Best GST Courses in India

    ReplyDelete
  147. Nice content, Thank you for sharing the valuable knowledge with us. I find the blog really informative and well explained.
    cricket balls distributors

    ReplyDelete
  148. Hello, I appreciate the author for providing a clear and concise tutorial on creating a simple HTML5 drawing app with the ability to save the drawings using AJAX. The tutorial includes step-by-step explanations and code samples, making it easy to understand and implement. Thank you.
    Data Analyst Interview Questions

    ReplyDelete
  149. You have provided a detailed guide on how to create a simple HTML5 drawing app using canvas and JavaScript, and how to save the drawings using Ajax. This is a great way to introduce users to the concept of interactive web applications. Thank you for the guidance.
    Data Analytics Courses at XLRI

    ReplyDelete