Drawing on screen by finger touch in Windows Store App


In some mobile projects, Many times I have come across about the requirement of drawing some figure on a mobile screen in a specified area by using the finger touch. Below is an example of very simple drawing mechanism in WinRT environment.


To begin with the example, we must think about the logic of implementing the same. So considering the idea of drawing on screen, the primary thought coming to mind is CANVAS.

Yes, we will use the canvas object here to draw the objects on screen.

Html file content
The Html file content is very simple. We will only add a canvas to it.

<canvas id="signCanvas" class="signCanv"></canvas>

CSS file content


This just a style class to make the canvas background appear white.

JS file cotent

app.onready = function(args) {
var mouseClicked = 0;</code>

var spnDevice = document.getElementById("spnDevice");
var imgdevice = document.getElementById("imgDevice");
var canvas = document.getElementById("signCanvas");

var context = canvas.getContext("2d");

canvas.addEventListener("MSPointerDown", function (evt) {
var pointerDevice = evt.currentPoint;
context.moveTo(pointerDevice.position.x, pointerDevice.position.y);
mouseClicked = 1;

canvas.addEventListener("MSPointerMove", function (evt) {
if (mouseClicked == 1) {
var pointerDevice = evt.currentPoint;
context.lineTo(pointerDevice.rawPosition.x, pointerDevice.rawPosition.y);
context.strokeStyle = "red";

canvas.addEventListener("MSPointerUp", function (evt) {
mouseClicked = 0;

We have added MSPointerDown, MSPointerMove and MSPointerUp events to track the touch happened, continuing and finger lifted from screen respectively. This application can also run in a desktop having Win8 installed and user can draw objects using mouse.


This is just a simple example of drawing objects on screen. By following the same process we can draw objects on screen using a mouse or a pen.

Thanks !!

Written By: Nirmal Hota, Cross-Platform Mobile Lead, Mindfire Solutions

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 )

Google photo

You are commenting using your Google 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 )

Connecting to %s