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

Sometimes it can be useful to share an image from your Cordova app to other apps, such as Facebook or Whatsapp.

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:

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 one of my apps:

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.