Attachment 340470 Details for Bug 185673 – Test

Test

test.html (text/html), 1.48 KB, created by Jon Lee on 2018-05-15 23:00:27 PDT

(hide)

Description:

Filename:

MIME Type:

Creator: Jon Lee

Created: 2018-05-15 23:00:27 PDT

Size: 1.48 KB

patch

obsolete

><!DOCTYPE html>
><html>
><head>
>	<meta charset="utf-8">
><style>
>div {
>	position: relative;
>	width: 300px;
>	height: 200px;
>}
>
>canvas {
>	position: absolute;
>	left: 0;
>	top: 0;
>	width: 100%;
>	height: 100%;
>}
></style>
></head>
><body>
><h1>1x</h1>
><div style="background-color:red">
>	<canvas id="a"></canvas>
></div>
><h1>2x</h1>
><div style="background-color:blue">
>	<canvas id="b"></canvas>
></div>
>
><script>
>w = 300;
>h = 200;
>
>["a", "b"].forEach(function(id) {
>	var canvas = document.getElementById(id);
>	var context = window[id] = canvas.getContext("2d");
>
>	if (id == "b") {
>		canvas.width = w * window.devicePixelRatio;
>		canvas.height = h * window.devicePixelRatio;
>		context.scale(window.devicePixelRatio, window.devicePixelRatio);
>	} else {
>		canvas.width = w;
>		canvas.height = h;
>	}
>
>    canvas.style.width = w + "px";
>    canvas.style.height = h + "px";
>
>	context.font = "52px Helvetica";
>	context.textAlign = "center";
>	context.textBaseline = "middle";
>	context.fillStyle = "white";
>});
>
>function animate() {
>	[a, b].forEach(function(context) {
>        var angle = Date.now() / 612;
>
>        context.clearRect(0, 0, w, h);
>
>        var stepX = Math.sin(angle) * 1.5;
>        var stepY = Math.cos(angle) * .5;
>        var x = -stepX * 3;
>        var y = -stepY * 3;
>        context.fillText("Ð´Ð¸Ð·Ð°Ð¹Ð½", w/2 + x, h/3 + y);
>
>        context.fillText("Ð´Ð¸Ð·Ð°Ð¹Ð½", Math.floor(w/2 + x), Math.floor(h*2/3 + y));
>	});
>	requestAnimationFrame(animate);
>}
>
>
>requestAnimationFrame(animate);
>
>
></script>
>
></body>
>
></html>

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
<style>
div {
	position: relative;
	width: 300px;
	height: 200px;
}

canvas {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}
</style>
</head>
<body>
<h1>1x</h1>
<div style="background-color:red">
	<canvas id="a"></canvas>
</div>
<h1>2x</h1>
<div style="background-color:blue">
	<canvas id="b"></canvas>
</div>

<script>
w = 300;
h = 200;

["a", "b"].forEach(function(id) {
	var canvas = document.getElementById(id);
	var context = window[id] = canvas.getContext("2d");

	if (id == "b") {
		canvas.width = w * window.devicePixelRatio;
		canvas.height = h * window.devicePixelRatio;
		context.scale(window.devicePixelRatio, window.devicePixelRatio);
	} else {
		canvas.width = w;
		canvas.height = h;
	}

    canvas.style.width = w + "px";
    canvas.style.height = h + "px";

	context.font = "52px Helvetica";
	context.textAlign = "center";
	context.textBaseline = "middle";
	context.fillStyle = "white";
});

function animate() {
	[a, b].forEach(function(context) {
        var angle = Date.now() / 612;

        context.clearRect(0, 0, w, h);

        var stepX = Math.sin(angle) * 1.5;
        var stepY = Math.cos(angle) * .5;
        var x = -stepX * 3;
        var y = -stepY * 3;
        context.fillText("Ð´Ð¸Ð·Ð°Ð¹Ð½", w/2 + x, h/3 + y);

        context.fillText("Ð´Ð¸Ð·Ð°Ð¹Ð½", Math.floor(w/2 + x), Math.floor(h*2/3 + y));
	});
	requestAnimationFrame(animate);
}


requestAnimationFrame(animate);


</script>

</body>

</html>

Actions: View

Attachments on bug 185673: 340470