My first steps in TypeScript. Hello Canvas!

Screenshot of application

Screenshot of application

April 11 2015

My first personal impression is that the Visual Studio 2015 CTP6 is so much better than anything else I tried before to use for mobile or embedded devices. Contemporary tools keep evolving, but Visual Studio is perfectly following or exceeding the rule: simple things should be possible to do in simple way, and for complex things it is OK to use a complex way.

 

The sense of what is complex in programming is changing day by day. I had a perception, that JavaScript in HTML5 with portability, debugging and various mobile targets is complex. But Visual Studio had a surprise for me with how easy was it to start making Mobile App.

 

Another personal discovery is wonderful Apache Cordova library. Together with TypeScript, studio debugger, prepackaged emulators for iPhone, Windows Phone and Android the Apache Cordova is exactly the happy place for developers like me.

 

Yesterday I was stuck at trying to copy-paste random JS examples for my canvas and Studio kept gently blocking me from adding nonsense into the code. The blocker for me was that TypeScript is not JavaScript, no. I, as late adopter, walked into mobile shop with expectation of comfort of OOP, IntelliSense, but instead of learning the language, I started pushing random copy-paste fragments into delicate machinery of TypeScript Design Time.

 

Next morning I learned just one little thing about TypeScript casting, and things worked!

function onDeviceReady() {
            // Handle the Cordova pause and resume events
            document.addEventListener('pause', onPause, false);
            document.addEventListener('resume', onResume, false);
            // TODO: Cordova has been loaded. Perform any initialization that requires Cordova here.
            // setup canvas 
            var myCanvas = <HTMLCanvasElement> document.getElementById('myCanvas');
            var ctx = myCanvas.getContext("2d");
            ctx.strokeStyle = "#00FF00";
            ctx.lineWidth = 5;
            // set starting point in center 
            // Create gradient
            var grd = ctx.createLinearGradient(0, 0, 200, 0);
            grd.addColorStop(0, "red");
            grd.addColorStop(1, "white");

            // Fill with gradient
            ctx.fillStyle = grd;
            ctx.fillRect(10, 10, 150, 80);
        }