Start a new topic

HtmlDrawable and canvas

HtmlDrawable and canvas

1 person has this problem
1 Comment


Hi,

I am trying to get a very basic example running that has a circle drawn inside a <canvas> within HtmlDrawable.

I was able to get a basic example of circle in canvas running without HtmlDrawable (i.e. it wasn't tracked). But I need it tracked. So I am trying HtmlDrawable. But just hitting a wall.

 

If I use the 'html' property insead of uri, I can't even get access to my canvas. I tried like this:

var canvas = document.getElementById('myCanvas');

 

It returns null.

 

So, Instead I tried the uri method, and created a different html file that has the following contents:

<html>
<head>
<meta name="viewport" content="target-densitydpi=device-dpi, width = 320, user-scalable = 0">
</head>
</html>
<body>

<canvas id="myCanvas" width="578" height="200"></canvas>

<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var radius = 700;

console.log('canvas.width:' + canvas.width);
console.log('canvas.height:' + canvas.height);

context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = 'green';
context.fill();
context.lineWidth = 5;
context.strokeStyle = '#003300';
context.stroke();

</script>
</body>

 

It seems like that i am not getting any error, but I get a rectangular white surface (as per HtmlDrawable), but I am not getting any circle within.

Does anyone know what am I doing wrong?

Has anyone ever successfully used a canvas with HtmlDrawable?

 

1 person likes this
Login or Signup to post a comment