Mobile-Web-App

Tuesday, January 31, 2012

HTML5 Canvas - fillRect(), with solid color/LinearGradient

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Mobile-Web-App: HTML5 Canvas - fillRect</title>
<script type="text/javascript">
function loadcanvas(){
 var canvas;
 var context; 

 canvas = document.getElementById("mycanvas");
 context = canvas.getContext("2d");
 
 drawRects(context);
}

function drawRects(c){

 c.lineWidth = 20;

 //default color
 c.fillRect(50, 50, 50, 100);
 
 //Rect in red
 c.fillStyle = "#FF0000";
 c.fillRect(150, 50, 50, 150);
 
 //Rect fill gradient
 //source and destination (x,y) coordinates for the gradient:
 //- createLinearGradient(srcX, srcY, destX, destY)
 gradient = c.createLinearGradient(250, 50, 250, 200);
 gradient.addColorStop(0,"blue");  //start from blue
 gradient.addColorStop(1,"green"); //end to green
 c.fillStyle = gradient;
 c.fillRect(250, 50, 50, 150);
 
 gradient2 = c.createLinearGradient(350, 50, 500, 200);
 gradient2.addColorStop(0,"red");  //start from red
 gradient2.addColorStop(1,"blue"); //end to blue
 c.fillStyle = gradient2;
 c.fillRect(350, 50, 150, 150);
 
}

</script>
</head>
<body onload="loadcanvas();">
<h1>Mobile-Web-App: HTML5 canvas - fillRect</h1>
 
<canvas id="mycanvas" style="border: 5px solid;" width="550" height="250">
Sorry! Your browser doesn't support Canvas.
</canvas>
</body>
</html>

Compare to: jQuery Mobile and canvas, with drawing

Check if the browser support canvas, using Javascript

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Mobile-Web-App: Javascript Exercise</title>
<script type="text/javascript">
function checkcanvas(){
 if(document.createElement('canvas').getContext){
  alert("Very Nice! Your browser support canvas:)");
 }else{
  alert("Sorry! your browser doesn't support Canvas");
 }
}

</script>
</head>
<body onload="checkcanvas();">
<h1>Mobile-Web-App: Javascript Exercise - Check Canvas</h1>

</body>
</html>

Android Developer Hangouts on every Wednesday at 2pm Pacific Time

Google have launched Android Developers on Google+.

Also, Android Developer Hangouts have been a great way to answer questions from developers around the world. It will be broadcasted On Air Office Hours using Google+ Hangouts every Wednesday at 2pm Pacific Time (10pm UTS). Googel engineers do weekly technical Q&A (Wednesday's at 2pm PT (10p GMT), but also do hold developer interviews, live app "surgeries", and more focussed Q&A around topics like game development and UI design.

Add Android Developers on Google+ to your circles

Now have a Google+ page for +Android Developers. Google's Android engineers will use it to host Hangouts for developers, talk about the latest releases, development and design tips, and much more.

Add +Android Developers to your circles!

Monday, January 30, 2012

HTML5 Canvas - Apply shadow of Text

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Mobile-Web-App: HTML5 Canvas</title>
<script type="text/javascript">
function loadcanvas(){
 var canvas;
 var context;

 canvas = document.getElementById("mycanvas");
 context = canvas.getContext("2d");
 
 drawText(context);
}

function drawText(c){
 setShadow(c, "#FF0000");
 c.font = "30pt helvetica";
 c.fillStyle = "#FF0000";
 c.fillText ("Mobile-Web-App", 50, 50);
 
 setShadow(c, "#00FF00");
 c.font = "18pt helvetica";
 c.fillStyle = "#00FF00";
 c.fillText ("http://mobile-web-app.blogspot.com/", 50, 100);
 
 setShadow(c, "#0000FF");
 c.font = "16pt helvetica";
 c.fillStyle = "#0000FF";
 c.fillText ("HTML5 canvas - Text", 50, 150);
 
}

function setShadow(c, color){
 c.shadowOffsetX = 5;
 c.shadowOffsetY = 5;
 c.shadowColor = color;
 c.shadowBlur = 5;
}

</script>
</head>
<body onload="loadcanvas();">
<h1>Mobile-Web-App: HTML5 canvas - Text</h1>

<canvas id="mycanvas" style="border: 5px solid;" width="450" height="250">
Sorry! Your browser doesn't support Canvas.
</canvas>
</body>
</html>

HTML5 Canvas - draw text on canvas

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Mobile-Web-App: HTML5 Canvas</title>
<script type="text/javascript">
function loadcanvas(){
 var canvas;
 var context;

 canvas = document.getElementById("mycanvas");
 context = canvas.getContext("2d");
 
 drawText(context);
}

function drawText(c){
 c.font = "30pt helvetica";
 c.fillStyle = "#FF0000";
 c.fillText ("Mobile-Web-App", 50, 50);
 c.font = "18pt helvetica";
 c.fillStyle = "#00FF00";
 c.fillText ("http://mobile-web-app.blogspot.com/", 50, 100);
 c.font = "16pt helvetica";
 c.fillStyle = "#0000FF";
 c.fillText ("HTML5 canvas - Text", 50, 150);
 
}

</script>
</head>
<body onload="loadcanvas();">
<h1>Mobile-Web-App: HTML5 canvas - Text</h1>

<canvas id="mycanvas" style="border: 5px solid;" width="450" height="250">
Sorry! Your browser doesn't support Canvas.
</canvas>
</body>
</html>

Related:
- HTML5 Canvas - Apply shadow of Text

Hello World Enyo 2.0

Example of web html using Hello Enyo 2.0, browsing on Android device

<!doctype html>
<html>
<head>
  <title>Enyo</title>
  <script src="enyo-2.0b/enyo.js" type="text/javascript"></script>
</head>
<body>
  <script type="text/javascript">
      new enyo.Control({content: "Hello From Enyo"}).write();
  </script>
</body>
</html>

About Enyo:
- Enyo now beyond webOS!