Using HTML5 Canvas to build and share images from an Ionic/Cordova app

My latest hybrid app, CoolKids, let you track good and bad actions of your kids to help them in self-improving. I thought it would be nice to share kids achievements with family and friends on social networks, emails, IM, etc. This post shows how I did it.

Social Sharing plugin for Ionic/Cordova

First I looked for a plugin to share content from a Ionic app in the most simple and generic way. I discovered the powerful Cordova Social Sharing plugin, which is also supported by ngCordova. The plugin let you share content using the native sharing widget, has a simple and clear API and works on all platforms I’m interested in, but there is a caveat:

cordova_social_share_support

It turns out that Facebook on Android doesn’t let you share a text message at all, also you cannot share an image and a link together.

In my use case the text is a must, but I would also like to render my content with an appealing graphics and some branding for my app. In other words I needed to build an image with graphics and text and use that image as the content to share.

HTML5 Canvas to the rescue

Fortunately in a modern hybrid app you can leverage the power of HTML5, and the Canvas API in particular. The idea is to create a Canvas in Javascript, and use it as a “blackboard” to draw images and text the way you like it. Then you’ll be able to “export” the Canvas content as a base64 encoded png image that you can share everywhere (Facebook included).

First of all create the Canvas object, set his dimensions (that will be the dimensions of the final png image) and get a context to work with:

var canvas = document.createElement('canvas');
canvas.width = 400;
canvas.height = 120;
var context = canvas.getContext('2d');

Then create a white rectangle as a frame for your content:

context.beginPath();
context.fillStyle = 'white';
context.rect(1, 1, 398, 118);
context.fill();
context.stroke();

Write some text on the Canvas:

context.fillStyle = 'black';
context.font = '18px Arial';
context.fillText('Jack', 120, 25, 190);
context.font = '24px Arial';
context.fillStyle = 'green';
context.fillText('10 points', 120, 55, 190);

Drawing images on the Canvas requires that images are first loaded, so you have to put the drawing in the onload callback, like this:

var avatar = new Image();
avatar.onload = function() {
    context.drawImage(avatar, 10, 10, 100, 100);
};
avatar.src = 'img/avatar.png';

The Canvas API is rich and gives you endless possibilities, you can find many good tutorials on the web. Here is an example of an image built with the Canvas API in my CoolKids app:

coolkids_social_share

When your drawings are complete you can get the URL of a base64 encoded png image using the toDataURL() method of the canvas object, and pass this URL to the Social Sharing Plugin, like this:

$cordovaSocialSharing.share(null, null, canvas.toDataURL());

You should see the native sharing widget allowing you to choose the app to use for sharing (Facebook, Twitter, Email, etc.), for a complete reference of what you can do with the Cordova Social Sharing plugin I suggest you to have a look at the plugin documentation.

Here you can find a complete example of a controller to start experiment with:

Chris Minnick at Webucator gently made a video tutorial based on this post, you can find it below. Webucator offers online and onsite courses on Mobile App Development, you can find more information on their website.

Advertisements

2 thoughts on “Using HTML5 Canvas to build and share images from an Ionic/Cordova app

Leave a comment

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s