{"id":21038,"date":"2016-04-04T03:01:00","date_gmt":"2016-04-03T17:01:00","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=21038"},"modified":"2016-04-03T21:23:15","modified_gmt":"2016-04-03T11:23:15","slug":"canvas-annotation-email-attachment-undo-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/canvas-annotation-email-attachment-undo-tutorial\/","title":{"rendered":"Canvas Annotation Email Attachment Undo Tutorial"},"content":{"rendered":"
\"Canvas<\/a>

Canvas Annotation Email Attachment Undo Tutorial<\/p><\/div>\n

A web application allowing user defined Annotations is better when there is an “Undo” and “Redo” functionality option. This is because with any user intervention, there can be erroneous work, which sometimes can be a real pain to recover from scratch.<\/p>\n

With “Undo” and “Redo” functionality, however, you do not want the user to think it is as much a part of the “mainstream” of the web application’s functionality, so we supply a “-” (minus) button for “Undo” and a “+” (plus) button for “Redo”, and make them smaller than other Annotation functionality buttons.<\/p>\n

So how do we achieve this functionality? We actually do it by actually …<\/p>\n

    \n
  1. always clearing the contents of the HTML canvas element<\/li>\n
  2. always place the original image via canvas.drawImage<\/a>() method<\/li>\n
  3. calling on a stored Javascript array containing HTML canvas drawing statements, flagging the ones that represent a single user defined action, that one “single user defined action” being what an “Undo” or “Redo” action works regarding<\/li>\n<\/ol>\n

    There is a great resource for information about the Javascript “Array” object called ECMAScript\u00ae Language Specification<\/a> (we got to via this link<\/a>, which is also excellent as an “Array” object member functionality synopsis (and which we urge you to consult), thanks).<\/p>\n

    You may wonder about how canvas.drawImage() parameter 1 (an image object) is handled. We assume you will only be interested in “Undo”s and “Redo”s of the last image (object) involved, which is stored in a global variable<\/font> (and rereferenced by “Undo” and\/or “Redo”) when the Annotations are created (and built up) by the user.<\/p>\n

    So yet again, our world.html<\/a> (with its live run<\/a>) did not need to change for this new “Undo”\/”Redo” functionality but our external Javascript you could call world.js<\/a> changed quite a bit<\/a>, setting up these Javascript arrays storing HTML canvas commands, for later use in “Undo” and “Redo” scenarios instigated by users clicking the relevant respective (small) “-” and “+” buttons.<\/p>\n

    As for …<\/p>\n

    \nWe “might” have genericized the world.html changes into other HTMLs of its ilk … well, we decided against that for now … but will later … and partly the reason is that there is more to do, and we just want to concentrate on world.html\n<\/p><\/blockquote>\n

    … we can now apply changes to the other HTML web applications …<\/p>\n