<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="300" height="150">
Your browser does not support the HTML5 canvas tag.</canvas>
<script src='https://code.jquery.com/jquery-2.1.3.js'></script>
<script>
$(document).ready(function () {
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
function Character1(canvas, progress, duration, delay) {
console.log("c1 " + progress);
delay = delay || 1;
var ctx = canvas.getContext('2d');
debugger;
if (progress < duration) {
canvas.strokeStyle = "black";
ctx.beginPath();
//ctx.moveTo(3, 1);//original forum code
//ctx.lineTo(3, 15 * ((progress + 1)/duration));
ctx.moveTo(2, 1);
ctx.lineTo(2 , 20* ((progress + 1) / duration));
// ctx.moveTo(1, 13);
// ctx.lineTo(1 , 30* ((progress + 1) / duration));
ctx.stroke();
ctx.closePath()
setTimeout(function () {
Character1(canvas, progress + 1, duration, delay);
}, delay);
} else {
debugger;
$(document.body).trigger("Character1Completed");
}
}
function Character2(canvas, progress, duration, delay) {
console.log("c2");
delay = delay || 1;
var ctx = canvas.getContext('2d');
if (progress < duration) {
canvas.strokeStyle = "black";
ctx.beginPath();
ctx.moveTo(5, 20);//Decrease the 2nd value to move line upwards
ctx.lineTo(30 * ((progress + 1) / duration), 20);
ctx.stroke();
ctx.closePath()
setTimeout(function () {
Character2(canvas, progress + 1, duration, delay);
}, delay);
}
else {
$(document.body).trigger("Character2Completed");
}
}
function Character3(canvas, progress, duration, delay) {
console.log("c3");
delay = delay || 1;
var ctx = canvas.getContext('2d');
if (progress < duration) {
var x = 23;//Decrease/increase to move the arc right/left side
var y = 12;//Decrease to move the arc up
var radius = 10;
var startAngle = .3 * Math.PI;
var endAngle = -1.3 * Math.PI;
var counterClockwise = false;
ctx.beginPath();
ctx.arc(x, y, radius, startAngle, endAngle * ((progress + 1) / duration), true);
ctx.lineWidth = 1;
ctx.stroke();
setTimeout(function () {
Character3(canvas, progress + 1, duration, delay);
}, delay);
}
else {
$(document.body).trigger("Character3Completed");
}
}
$(document.body).on("Character1Completed", function (e) {
console.log("Starting Character 2");
Character2(canvas, 0, 30, 33);
});
/* $(document.body).on("Character2Completed", function (e) {
console.log("Starting Character 3");
Character3(canvas, 0, 30, 33);
});*/
$(document.body).on("Character3Completed", function (e) {
console.log("Completed Drawing!");
});
// Start Drawing
Character1(canvas, 0, 30, 33);
});
</script>
</body>
</html>This is a snippet of my HTML code used for drawing shapes on a canvas element and triggering completion events.
WebView wv;
wv = (WebView) findViewById(R.id.mybrowser1);
wv.loadUrl("file:///android_asset/www/ta.html");
wv.getSettings().setJavaScriptEnabled(true);
wv.setBackgroundColor(Color.TRANSPARENT);
When attempting to load this HTML code in an Android WebView, it seems to load successfully but remains invisible on the screen. The following error message is displayed:
In ResourceHandle::create newHandle -> Blocked Failure
Looking at the logcat, the aforementioned error is reported. I'm unsure about what might be causing this issue.
Trying to display the webpage without any user interaction also results in a message stating:
Your browser does not support the HTML5 canvas tag