List of drawings

What we do here is add a button that save the current drawing to an array. And have a list of current stored drawings in Img tags.

The button HTML

1<a id='save-drawing' data-role='button'>Save Drawing</a>

The images container

1<div id="drawings-list"></div>

The button click handler

1$('#save-drawing').click(function(){
2  app.drawings.push(app.drawingPad.data());
3  app.drawingPad.clear();
4  app.view.renderDrawings(app.drawings);
5});

The logic:

1app.drawings = [];

Adding 2 methods to the drawing pad. clear to clear the canvas data and data to return the canvas into base64 URL encoded.

 1var drawingPad = app.drawingPad = {
 2  // existing drawing pad code
 3  clear: function() {
 4    canvas[0].width = canvas[0].width;
 5  },
 6  data: function() {
 7    return canvas[0].toDataURL();
 8  }
 9};

The view

 1app.view.drawingsList = $('#drawings-list');
 2app.view.renderDrawings = function(drawings) {
 3  this.drawingsList.empty();
 4  for (var i = drawings.length-1; i>=0; i--) {
 5    var drawing = drawings[i];
 6    var img = $("<img />");
 7    img.attr('src', drawing);
 8    this.drawingsList.append(img);
 9  };
10}

By the way, Empty the whole list is slow. Try improve the code to just push the new image to the list.

What’s next? We’re going to take a look at “Introducing WebSQL”.

◀ Base64 encode Introducing WebSQL ▶

makzan.

List of drawings

Makzan | Mobile web app dev with phonegap | Table of Content