Participafitti/demo2(fixe_text).html at master · marcelfarres/Participafitti · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<!DOCTYPE html>
<!-- saved from url=(0057)http://www.html5.jp/test/perspective_canvas/demo1_en.html -->
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<title>Image+Text/Image/... </title>
<link rel="stylesheet" href="style.css" type="text/css">
<script src="perspective.js"></script>
<script>
(function () {

window.addEventListener("load", function() {

	// General Canvas
	var canvas = document.getElementById("canvas");
	var ctx = canvas.getContext('2d');
  // BackGround
  var bg = new Image();
  bg.src = "data/dummy.jpg";
  bg.onload = function(){
	  canvas.height = bg.height;
	  canvas.width = bg.width;
		canvas1.width = canvas.width;
		canvas1.height = canvas.height;
  }
  ctx.drawImage(bg,0,0);

  // Overlay
	var canvas1 = document.createElement('canvas');
	var ctx1 = canvas1.getContext('2d');
	var op = null;
	var points = [[254, 347], [984, 350], [970, 697], [264, 621]];
  ctx1.fillStyle = "white";
  ctx1.fillText("Example Text", canvas1.width, canvas1.height);
	op = new html5jp.perspective(ctx1, canvas1);
	op.draw(points);
	draw_canvas(ctx, ctx1, bg);

}, false);

function draw_canvas(ctx, ctx1, bg) {
	ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
	ctx.drawImage(bg, 0, 0);
	ctx.drawImage(ctx1.canvas, 0, 0);
  console.log ("All loded! ");
}

})();
</script>


<style type="text/css"></style></head>


<body>


<p><canvas width="600" height="450" id="canvas"></canvas></p>


</body></html>