June 2017 Meeting Report : Sydney PC Web Design Group

June 2017 Canvas and Mobirise

This month we looked at the Canvas tag. Following from our delving into SVG last month we investigated Canvas or how to draw things in HTML. In some ways, it’s like the image tag on steroids.

To investigate Canvas, we looked at Chapter 13 of the Second edition of “Creating Web Pages Simplified” by Mike Woodbridge and Briannna Stuart. I did find that the third edition had removed the chapter on Canvas.

It gives a great basic rundown on the code used to create a canvas and the script needed to create simple drawings. We also used the Sitepoint Article “HTML5 Canvas Tutorial: An Introduction” by Ivaylo Gerchev.

This article points out, firstly the main reasons for using Canvas, see “What’s so great about HTML5 Canvas”. and the applications that can be made of Canvas. The examples he sited were Gaming, Advertising, Education, Data display and Art.

To use canvas, we first create a canvas tag

<canvas>----</canvas> inside the html page, to which we need to add an id and a width and height.

<canvas id="“canvasname”" height="”100”" width="”100”"> </canvas<.

Because it’s an HTML tag it must sit inside the html document and with an id you can then use CSS to style the look of the tag, one of the main examples was to place a box around the tag. The id is also used to connect the script to the canvas tag.

To draw on your canvas you now need a script, usually a javasript. We did not go into how to create a javasript. We did however steal a few examples so we could understand how it works. For the script to work it needs at least two elements, the first tells the script to place the drawing in the canvas by telling the script to “get the element by id”, and the second, whether it’s to be rendered in 2d or 3d.

Javascript headings

var canvas = document.getElementById('canvasname'),

context = canvas.getContext('2d');

To find some examples of javascript, we raided codepen.io

and searched for canvas. Codepen is a free service for people who want to test code. We then played with the code.

Codepen Canvas expirement

We importing it into a blank site inside a script tag or adding the script as a link to see how it worked.

Mobirise

Mobirise screen shot 1

This app allows you to build a site without resorting to code. You can download the program here. When you install it you need to register but the program works offline, so you can build you site on your computer then upload it. The program comes with an upload program allowing you to publish to a local drive github or use fpt to your own site.

Mobirise screen shot 2

You build a site using a set of free template elements which are quite extensive. You can also by extensions such as a code editor, $69 US or $90.69 AUS.

Mobirise screen shot 4

There are headers with background and front images, you can add video in these headers both as background and or front images. All the elements can be modified as to colour and font but the basic element cannot be changed. As an example, there are three card elements, two use icons and one images, you don’t appear to be able to change the icons for images.

Mobirise screen shot 4

You can edit the overall styles fonts etc and you can drag and drop elements any were you need them in the site. Mobirise is based on Bootstrap one of a number of frameworks that help developers build sites by having some of the code prewritten. Overall it creates a good modern design but its appears to limit your ability to edit the elements content. I think there are better free editors out there.

Here’s the site we created

Mobirise test site