Forum d'Entraide Informatique (FEI)

Bonjour,
j'ai un probleme c'est la 1er fois que j'utilise le canvas dont l'objectif de faire des dessin sur mes pages web ,et pour faire adapter les dimensions du canvas avec celle du n'importe quel ecrans j'ai utilise plusieurs canvas sur la meme page mon probleme c'est que j'arrive a dessiner sur une canvas alors que les autres nn .alors ma question c'est comment je peut faire dessiner sur tous les canvas sachant que j'ai utilise la bibliotheque fabric.js pour le dessin voici mon code :
le code javascript :
function loadScript(url, callback){
var script = document.createElement("script")
script.type = "text/javascript";
if (script.readyState){
script.onreadystatechange = function(){
if (script.readyState == "loaded" ||
script.readyState == "complete"){
script.onreadystatechange = null;
callback();
}
};
} else {
script.onload = function(){
callback();
};
}
script.src = url;
document.getElementsByTagName("head")[0].appendChild(script);
}
loadScript("js/fabric.js", function(){
var canvasList=[];
var bodyHeight = document.getElementsByTagName('body')[0].clientHeight;
var bodyWidth = document.getElementsByTagName('body')[0].clientWidth;
var CanvasWidthtCount = parseInt(bodyWidth/300);
var CanvasHeightCount = parseInt(bodyHeight/300);
for (var i = 0; CanvasHeightCount > i; i++)
{
for (var j= 0; CanvasWidthtCount >j; j++)
{
var canvas = fabric.document.createElement('canvas');
canvas.width = 300;
canvas.height = 300;
canvas.id = "id_"+i+'_'+j;
canvas.style.position = "absolute";
canvas.style.border = "10px solid black";
canvas.style.top = i*300+"px";
canvas.style.left = j*300+"px" ;
canvasList.push({'id':canvas.id,'height':canvas.height, 'width':canvas.width,'top':canvas.style.top,'left':canvas.style.left});
document.getElementsByTagName('body')[0].appendChild(canvas);
/* var elem = document.getElementById("id_"+i+'_'+j);
var canvas = new fabric.Canvas("id_"+i+'_'+j, { isDrawingMode: true });
fabric.Object.prototype.transparentCorners = false;
canvas.freeDrawingBrush.color = 'blue';
canvas.freeDrawingBrush.width = 10;
/

if(bodyWidth-(CanvasWidthtCount*300)!= 0 && (j+1) == CanvasWidthtCount)
{
canvas = document.createElement('canvas');
canvas.style.top = i*300+"px";
canvas.style.left =CanvasWidthtCount*300+"px" ;
canvas.width = bodyWidth-(CanvasWidthtCount*300);
canvas.height = 300;
canvas.id = "id_"+i+'_'+j+'_last';
canvas.style.position = "absolute";
canvas.style.border = "10px solid black";
document.getElementsByTagName('body')[0].appendChild(canvas);
canvasList.push({'id':canvas.id,'height':canvas.height, 'width':canvas.width,'top':canvas.style.top,'left':canvas.style.left});
}
if(bodyHeight-(CanvasHeightCount*300)!= 0 && (i+1) == CanvasHeightCount)
{
var canvas = document.createElement('canvas');
canvas.style.top = (i+1)*300+"px";
canvas.style.left =j*300+"px" ;
canvas.height = bodyHeight-(CanvasHeightCount*300);
canvas.width = 300;
canvas.id = "id_"+i+'_'+j+'_last2';
canvas.style.position = "absolute";
canvas.style.border = "10px solid black";
document.getElementsByTagName('body')[0].appendChild(canvas);
canvasList.push({'id':canvas.id,'height':canvas.height, 'width':canvas.width,'top':canvas.style.top,'left':canvas.style.left});
}
}
if(bodyHeight-(CanvasHeightCount*300)!= 0 && (i+1) == CanvasHeightCount)
{
var canvas = document.createElement('canvas');
canvas.style.top = (i+1)*300+"px";
canvas.style.left =j*300+"px" ;
canvas.height = bodyHeight-(CanvasHeightCount*300);
canvas.width = bodyWidth-(CanvasWidthtCount*300);
canvas.id = "id_"+i+'_'+j+'_end';
canvas.style.position = "absolute";
canvas.style.border = "10px solid black";
document.getElementsByTagName('body')[0].appendChild(canvas);
canvasList.push({'id':canvas.id,'height':canvas.height, 'width':canvas.width,'top':canvas.style.top,'left':canvas.style.left});
}
console.log(canvasList);
var canvas = document.getElementById(canvas.id);
var ctx = canvas.getContext("2d");
var can = new fabric.Canvas(canvas.id, {
isDrawingMode: true
});
fabric.Object.prototype.transparentCorners = false;
can.freeDrawingBrush.color = 'blue';
can.freeDrawingBrush.width = 10;
}
/////////////////////////////////////////////////////drawing
for (var index in canvasList) {
(function() {
var mode = document.getElementById(canvasList[index].id);
var ctx = mode.getContext("2d");
var canvas = new fabric.Canvas(canvasList[index].id, {
isDrawingMode: true
});
fabric.Object.prototype.transparentCorners = false;
canvas.freeDrawingBrush.color = 'blue';
canvas.freeDrawingBrush.width = 10;
})();////end function
}//end for
}); // end
le code html
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript" src="js/hot2.js"></script>