JSONP does not work in twitter

window.onload = function () { var button = document.getElementById('Previewbutton'); button.onclick = PreviewHandler; }; function PreviewHandler () { console.log("PreviewHandler"); var canvas = document.getElementById("tweetshirt"); var context = canvas.getContext("2d"); fillBackgroundColor (canvas,context); updateTweets (tweets); drawText (canvas,context); var selectObj = document.getElementById ("shape"); var index = selectObj.selectedIndex; var shape = selectObj[index].value; if (shape=="Squares") { for (var squares=0; squares<20; squares++) { drawSquare (canvas,context); }; }; if (shape=="Circles") { for (var circles=0; circles<20; circles++) { drawCircle (canvas,context); }; }; } function drawCircle (canvas,context) { var x = Math.floor(Math.random()*canvas.width); var y = Math.floor(Math.random()*canvas.height); var radius = Math.floor(Math.random()*40); context.beginPath(); context.arc(x,y,radius,0,2*Math.PI,true); context.fillStyle = "lightblue"; context.fill(); } function drawSquare (canvas,context) { var w = Math.floor(Math.random()*40); var x = Math.floor(Math.random()*canvas.width); var y = Math.floor(Math.random()*canvas.height); context.fillStyle = "lightblue"; context.fillRect (x,y,w,w); }; function fillBackgroundColor (canvas,context) { var selectObj = document.getElementById("backgroundColor"); var index = selectObj.selectedIndex; var bgColor = selectObj.options[index].value; context.fillStyle=bgColor; context.fillRect (0,0,canvas.width,canvas.height); }; function updateTweets(tweets) { var TweetSelection = document.getElementById("tweets"); for (var i=0; i<tweets.length; i++) { tweet = tweets[i]; var option = document.createElement("option"); option.text=tweet.text; option.value=tweet.text.replace("/","'"); TweetSelection.options.add(option); }; TweetSelection.selectedindex=0; } function drawText(canvas,context) { var selectObj= document.getElementById("foregroundColor"); var index = selectObj.selectedIndex; var fgColor = selectObj[index].value; context.fillStyle = fgColor; context.font = "bold 1 em sans-serif"; context.textAlign="left"; context.fillText ("ya povelsia na etot tweet",20,40); selectObj = document.getElementById("tweets"); index = selectObj.selectedIndex; var tweet = selectObj.options[index].value; context.font="italic 1.2 em sans-serif"; context.fillText (tweet,30,100); context.font= "bold 1 em sans-serif"; context.textAlign = "right"; context.fillText("v rezultate poluchil mayku", canvas.width-20, canvas.height-40); } 

 canvas {border: 1px solid black;} 

 <canvas width="600" height="400" id="tweetshirt">Please upgrade your browser to use tweetshirt!</canvas> <form> <p> <label for="backgroundColor">Select background color:</label> <select id="backgroundColor"> <option value="white" selected="selected">White</option> <option value="black">Black</option> </select> </p> <p> <label for="shape">Circles or squares?</label> <select id="shape"> <option value="none" selected="selected">None</option> <option value="Circles">Circles</option> <option value="Squares">Squares</option> </select> </p> <p> <label for="foregroundColor">Select Text colour:</label> <select id="foregroundColor"> <option value="Black" selected="selected">Black</option> <option value="White">White</option> </select> </p> <label for="tweets">Pick a tweet:</label> <select id="tweets"></select> <p> <input type="button" id="Previewbutton" value="Prevew"> </p> </form> <script src="http://api.twitter.com/1/statuses/user_timeline/wickedsmartly.json?callback=updateTweets"></script>