{"id":40451,"date":"2018-08-31T03:01:38","date_gmt":"2018-08-30T17:01:38","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=40451"},"modified":"2018-08-30T21:05:59","modified_gmt":"2018-08-30T11:05:59","slug":"gimp-guillotine-follow-up-canvas-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/gimp-guillotine-follow-up-canvas-tutorial\/","title":{"rendered":"Gimp Guillotine Follow Up Canvas Tutorial"},"content":{"rendered":"
\"Gimp<\/a>

Gimp Guillotine Follow Up Canvas Tutorial<\/p><\/div>\n

The second of the non-primer tutorial themes to improve and build on yesterday’s Gimp Guillotine Follow Up Div Margin Tutorial<\/a> …<\/p>\n


\nHTML div element housing HTML img elements (no position: absolute like we like so much for overlay work<\/font>) using style property margin-left<\/em> and HTML br (line break) element (which sometimes requires negative margin-top<\/em> tweaking)
\n<\/code><\/p>\n

… involves the ever useful canvas<\/a> element introduced with HTML5 as per …<\/p>\n


\nHTML canvas element object's drawImage method helps draw HTML img elements positionally so as to recreate the original image look from constituent \"jigsaw image element\" HTML img elements
\n<\/code><\/p>\n

Let’s take a step back, reread Emoji Border or Background Image Canvas Tutorial<\/a> …<\/p>\n

\n

What’s the big deal with the HTML5 canvas<\/a> element? For a few things …<\/p>\n

<\/p>\n