Mauvais rendu d'un canvas après avoir copié le contenu d'un canvas

**totoAussi** · 05/08/2016, 19h06

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

**melka one** · 05/08/2016, 20h10

bonjour

le comportement est normale vue que l'image est redimensionné pour être plus grande que l'originale c'est du a l’algorithme de redimensionnement intégré a l'api canvas.

**totoAussi** · 05/08/2016, 21h45

Donc le flou dans l'image redimensionné est normal ?

**melka one** · 05/08/2016, 22h48

c'est le même principe que pour un logiciel de retouche d'image sauf que la on n'a pas le choix de l’algorithme

Mauvais rendu d'un canvas après avoir copié le contenu d'un canvas

JavaScript

Discussions similaires

Partager

Partager