Home > English > Developing Windows 8 – Saving your canvas

Developing Windows 8 – Saving your canvas

Developing applications for Windows 8 has been so much fun now that we can use HTML5, CSS3, and JavaScript.  I have been inspired to write some simple applications for the Windows 8 App Store.  This has been a very fun experience and I find that the more that I try and push myself, the more I end up learning.

I recently just released a new application for drawing called, “DoodlePad“.  This simple application allows you to draw on the canvas and change your brush color, size, and background of your canvas.  It also allows you to save your drawing, create a new one, or open an existing image.  One of the tricky parts that I ran into when developing this application was trying to provide a good user experience by allowing them to have a background color.

This wasn’t as easy as I had first imagined since the Canvas is transparent by default.  At first I thought I could simply create a fill style and then fill the Canvas rectangle with whatever color a user chose.  However this didn’t work out very well when I was testing because as soon as I would start drawing and then want to change the background, all of my art work up till then would be covered with the new background.

Here is what I came up with, I decided to use a wrapping DIV that I would set the “background-color” property using JavaScript whenever the user selected a different color.  This turned out to work perfectly well due to the Canvas being transparent out of the box.

Now comes the problem, when I want to dump all the beautiful work that the user has done create a masterpiece, the canvas no longer has any information concerning the background.

The following code snippet will demonstrate what I had to do to get this working so that I could allow my users to save their artwork including the backgrounds:

var canvas = id("doodleCanvas");
var width = canvas.width;
var height = canvas.height;
var ctx = canvas.getContext("2d");

var canvas2 = id("canvas2");
canvas2.width = width;
canvas2.height = height;
WinJS.Utilities.removeClass(canvas2, "hidden");
var ctx2 = canvas2.getContext("2d");
var wrapper = document.getElementById("canvasWrapper");
if (wrapper.style.backgroundColor !== "") {
    ctx2.fillStyle = wrapper.style.backgroundColor;
    ctx2.fillRect(0, 0, width, height);
}
ctx2.drawImage(canvas, 0, 0);

imgData = ctx2.getImageData(0, 0, width, height);
WinJS.Utilities.addClass(canvas2, "hidden");

The following is what the HTML looks like:

<div id="canvasWrapper">
    <canvas id="canvas2"></canvas>
    <canvas id="doodleCanvas"></canvas>
</div>

In a nutshell, I am simply applying the background color from the wrapper DIV and setting it as the fill color for the context of the “canvas2” canvas object. Then, I simply draw what was on the content of the first canvas onto the “canvas2” object. You will also notice that I am adding and removing a class that simply hides “canvas2”.

Here is the CSS for the “hidden” class:

.hidden {
    visibility: hidden;
}

A final note
One thing that took longer than I originally anticipated, was that when I first tried this approach, I was getting really inconsistent behavior on the screen from the user’s perspective. I would lose touch capabilities and also lose the drawing altogether. The solution I found is very simple and I was surprised that not having these CSS properties set caused so many problems:

canvas {
    position:absolute;
    top:0;
    left:0;
}

I found that it was necessary to ensure that both of the canvas objects were exactly the same size and positioned in the same place.

Hope this helps…

Advertisements
Categories: English Tags: , , , ,
  1. No comments yet.
  1. February 24, 2013 at 9:56 pm

Leave a Reply

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

%d bloggers like this: