sencha touch 2 html5 canvas drawimage blu image resolution - html

Question

I have a problem when I use drawImage function to draw an image inside an html5 canvas ;used with a code Sencha Touch 2 images look blu and they don't have height quality this is the code:
//We've added a third and final item to our tab panel - scroll down to see it
var index=0;
Ext.application({
name: 'Sencha',
launch: function() {
var panel = Ext.create("Ext.Panel", {
fullscreen: true,
items: [
{
title: 'Home',
iconCls: 'home',
cls: 'home',
width: '533px',
listeners: {
painted: function() {
var a={Source:'images/2.tiff',Titre:'T1',Description:'D1'};
var b={Source:'images/Im2.jpg',Titre:'T1',Description:'D1'};
var c={Source:'images/Im3.jpg',Titre:'T1',Description:'D1'};
var d={Source:'images/Im4.jpg',Titre:'T1',Description:'D1'};
var e={Source:'images/Im5.jpg',Titre:'T1',Description:'D1'};
var f={Source:'images/Im6.jpg',Titre:'T1',Description:'D1'};
var img = new Image();
var img1 = new Image();
var img2 = new Image();
img.src = "images/Im1.jpg";
img1.src = "images/Im2.jpg";
img2.src = "images/Im3.jpg";
var ImageP = new Image();
//********************
var x,y,Dim_Image,espacement;
Dim_Image=50;
espacement=30;
var Presentation=new Array();
Presentation[0]=a;
Presentation[1]=b;
Presentation[2]=c;
Presentation[3]=d;
Presentation[4]=e;
Presentation[5]=f;
//********************
//°°°°°°°°°°°°°°°°°°°°°°
/* Ici on teste le tableau*/
var testImage = new Array();
//cw-(i*espacement),i*espacement,Dim_Image,Dim_Image);
var j=0;
for(i=index;i<index+3;i++)
{
testImage[i]= new Image();
testImage[i].src=Presentation[i].Source;
testImage[i].onload = function()
{
context.drawImage(testImage[j],cw-80-(j*espacement),20+j*espacement,Dim_Image,Dim_Image);
j++;
}
}index = index +1;
var img = new Image();
var canvas = document.getElementById('mycanvas');
var context = canvas.getContext("2d");
var cw = canvas.width;
var ch = canvas.height;
//Event================================================================
canvas.addEventListener("mousedown" ,function(event){
testImage = new Array();
context.clearRect(0,0,300,300); // clear canvas
var j=0;var inf =index;var ss;
for(i=index;i<index+3;i++)
{
testImage[i-index]= new Image();
testImage[i-index].src=Presentation[i].Source;
if( i == index+2)
{alert("index +3");
testImage[i-index].onload = function()
{context.globalAlpha=1;
context.drawImage(testImage[j],cw-80-(j*espacement),20+j*espacement,Dim_Image,Dim_Image);
j++;
}
}
else{
testImage[i-index].onload = function()
{context.globalAlpha=0.5;
context.drawImage(testImage[j],cw-80-(j*espacement),20+j*espacement,Dim_Image,Dim_Image);
j++;
}
}
}
index=index+1;
context.stroke();
},false);
context.strokeStyle = 'black';
context.stroke();
//};
},
scope: this
},
html: [
' <canvas id="mycanvas" style="background-color:grey; width:100%; height:100%;">no canvas support</canvas>'
]
} //this is the new item
]
});
}
});

Answer 1

What exactly you are trying to achieve?
Perhaps the problem is related to the drawImage method type you are using
Have a look at this link on the usage how to use, and what exactly the parameters that you added means.
Problem may be aspect ratio , width , height calculation from your side.
http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#dom-context-2d-drawimage