Mauvais rendu d'un canvas après avoir copié le contenu d'un canvas
Bonjour,
j'ai deux canvas et un bouton select.
Le contenu du 1er canvas est copié dans le 2ème canvas.
Le bouton select sert à redimensionner uniquement le 2ème canvas.
Lorsque j'augmente la taille du 2ème canvas avec le bouton select, le 2ème canvas et son contenu sont redimensionnés correctement, mais son rendu est mauvais car le rectangle et le texte dessinés sont un peu flou.
Quel est le problème ? Comment corriger ce rendu ?
Voici le code source (que vous pouvez ici : https://jsfiddle.net/0kqqnkmp/)
Code:
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
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
| <!DOCTYPE html>
<html>
<head>
</head>
<body>
<canvas id="canvas"></canvas>
<canvas id="canvas_second"></canvas>
<br>Choose your scale : <select onchange="change_scale(this);" autocomplete="off">
<option>0.5</option>
<option selected>1</option>
<option>1.5</option>
<option>2</option>
</select>
<script type="text/javascript">
//The canvas :
c = document.getElementById("canvas");
c.style.border = "solid #000000 1px";
//The second canvas :
c_second = document.getElementById("canvas_second");
c_second.style.border = "solid #000000 1px";
//Define the original width and height canvas :
ORIGINAL_WIDTH_CANVAS = 300;
ORIGINAL_HEIGHT_CANVAS = 300;
c.width = ORIGINAL_WIDTH_CANVAS;
c.height = ORIGINAL_HEIGHT_CANVAS;
c_second.width = ORIGINAL_WIDTH_CANVAS;
c_second.height = ORIGINAL_HEIGHT_CANVAS;
//The canvas context :
ctx = c.getContext("2d");
ctx_second = c_second.getContext("2d");
//Default scaling
scale = 1;
//Drawing function :
function draw()
{
//Clear the drawing :
ctx.clearRect(0, 0, ORIGINAL_WIDTH_CANVAS, ORIGINAL_HEIGHT_CANVAS);
//Drawing a red rectangle :
ctx.fillStyle = "#000000";
ctx.fillRect(5, 5, 50, 50);
//Drawing a text :
ctx.font = "normal bold 20px sans-serif";
ctx.fillText("Hello world", ORIGINAL_WIDTH_CANVAS-220, ORIGINAL_HEIGHT_CANVAS-10);
//Clear the drawing on the second canvas :
ctx_second.clearRect(0, 0, ORIGINAL_WIDTH_CANVAS, ORIGINAL_HEIGHT_CANVAS);
//Copy drawing on the second canvas :
ctx_second.drawImage(c, 0, 0);
}
//Function for scaling the second canvas :
function change_scale(this_select)
{
//Retrieve the scale value :
scale = parseFloat(this_select.value);
//Resize the second canvas :
c_second.width = ORIGINAL_WIDTH_CANVAS * scale;
c_second.height = ORIGINAL_HEIGHT_CANVAS * scale;
//Apply scaling on the second canvas :
ctx_second.scale(scale, scale);
}
//Draw :
setInterval("draw()", 300);
</script>
</body>
</html> |
Merci d'avance pour votre aide.
