How to add multiple images using array in kineticJS? - javascript
I am actually trying to implement the functionality where I can add multiple images onto a canvas using array and kineticJs. I am unable to load images onto the canvas however these images are created outside the canvas body. I want to draw these circle images onto the canvas body. Cheers
<html>
<head>
<title>Bomb Game</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src = "https://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.4.3.min.js"></script>
</head>
<body>
<div id = "container"></div>
<script>
window.onload = $(document).ready(function()
{
var bombLeft, bombTop, bombRight, bombBottom;
var timerLeft, timerTop, timerRight, timerBottom;
var numberCircles = [];
function loadImages(sources, callback)
{
var images = {};
var loadedImages = 0;
var numImages = 0;
// get num of sources
for(var src in sources)
{
numImages++;
}
for(var src in sources)
{
images[src] = new Image();
images[src].onload = function()
{
if(++loadedImages >= numImages)
{
callback(images);
}
};
images[src].src = sources[src];
}
}
var newCanvas = document.createElement("canvas");
var ctx = newCanvas.getContext("2d");
newCanvas.width = window.innerWidth;
newCanvas.height = window.innerHeight;
newCanvas.style.border = "10px solid #000000";
newCanvas.style.margin = "0px";
$("#container").append(newCanvas);
var sources = {background: 'bomb_artwork/background.jpg', bomb: 'bomb_artwork/bomb.png', timer: 'bomb_artwork/timer.png',
boxSmall: 'bomb_artwork/box_1.png',boxBig: 'bomb_artwork/box_2.png', numberCircle: 'bomb_artwork/number_circle.png', explode: 'bomb_artwork/explode.png'};
function initStage(images)
{
var stage = new Kinetic.Stage({
container: 'container',
width: newCanvas.width,
height: newCanvas.height
});
var layer = new Kinetic.Layer();
loadImages(sources,function(images){
<!-- For background image -->
ctx.drawImage(images.background,0,0,newCanvas.width,newCanvas.height);
x1 = newCanvas.width/7;
y1 = newCanvas.height/3;
x2 = newCanvas.width/8;
y2 = newCanvas.height/8;
<!-- To add boxes in background>
ctx.drawImage(images.boxBig,750,370,150,120);
ctx.drawImage(images.boxBig,754,270,150,120);
ctx.drawImage(images.boxSmall,788,210,120,80);
<!-- For bombbottom -->
bombBottom = images.bomb;
timerBottom = images.timer;
ctx.drawImage(bombBottom,newCanvas.width/2-newCanvas.width/8,newCanvas.height-150,x1,y1);
ctx.drawImage(timerBottom,newCanvas.width/2+newCanvas.width/10000,newCanvas.height-50,x2,y2);
ctx.font = "28pt Times New Roman";
ctx.fillStyle = "yellow";
ctx.fillText("Player 1", 720, 635);
ctx.font = "20pt Times New Roman";
ctx.fillStyle = "yellow";
ctx.fillText("? - 6 = 11", 730, 670);
<!-- For bombleft-->
bombLeft = images.bomb;
timerLeft = images.timer;
ctx.save();
ctx.rotate(Math.PI / 2);
ctx.drawImage(bombLeft,230,-newCanvas.height/4,x1,y1);
ctx.drawImage(timerLeft,400,-newCanvas.height/13,x2,y2);
ctx.restore();
<!-- For bombtop-->
bombTop = images.bomb;
timerTop = images.timer;
ctx.save();
ctx.translate(100, 100);
ctx.rotate(Math.PI);
ctx.drawImage(bombTop,-650,-50,x1,y1);
ctx.drawImage(timerTop,-480,50,x2,y2);
ctx.restore();
<!-- For bombright-->
bombRight = images.bomb;
timerRight = images.timer;
ctx.save();
ctx.translate(100, 100);
ctx.rotate(-Math.PI/2);
ctx.drawImage(bombRight,-325,1100,x1,y1);
ctx.drawImage(timerRight,-150,1215,x2,y2);
ctx.restore();
<!-- TO draw random circles -->
for(var i = 0; i < 30;i++)
{
numberCircles[i] = new Kinetic.Image({
image : images.numberCircle,
x : Math.floor(Math.random()* newCanvas.width),
y : Math.floor(Math.random()*newCanvas.height),
width : 50,
height : 50,
draggable : true,
stroke : 'red',
strokeWidth : 10,
strokeEnabled : false
/*if((x > newCanvas.width/8 && x < newCanvas.width-newCanvas.width/6)&&(y > newCanvas.height/4 && y < newCanvas.height-newCanvas.height/3))
{
ctx.drawImage(numberCircles[i],x,y,50,50);
}
else
{
i = i-1;
continue;
}*/
});
layer.add(numberCircles[i]);
stage.add(layer);
}
// use event delegation to update pointer style
// and apply borders
layer.on('mouseover', function(evt) {
//var shape = evt.shape;
document.body.style.cursor = 'pointer';
//shape.enableStroke();
layer.draw();
});
layer.on('mouseout', function(evt) {
//var shape = evt.shape;
document.body.style.cursor = 'default';
//shape.disableStroke();
layer.draw();
});
});
}
loadImages(sources,initStage);
});
</script>
</body>
</html>
Related
HTML5 Canvas custom image for objects
I'm trying to get a single HTML with javascript to run a canvas with a snowfall effect that uses a custom image.
The canvas is working completely and is rendering the objects as white objects since the fill style is set to white. Instead of the white objects, I want to use a custom image, but somehow the script is not rendering the image in with the draw function.
I've tried changing the fillstyle to a pattern, but that doesn't seem to be available anymore?
Is there another option to fill the objects with a custom image?
Below is the code that I'm (Full HTML/Javascript code)
<html>
<head>
<meta charset=utf-8 />
<title>HTML5 Rain</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
article, aside, figure, footer, header, hgroup,
menu, nav, section { display: block; }
</style>
</head>
<body onload="init()">
<canvas id="canvasRain" width="1920px" height="1080px">Canvas Not Supported</canvas>
<script type="text/javascript">
var canvas = null;
var context = null;
var bufferCanvas = null;
var bufferCanvasCtx = null;
var pepperArray = [];
var pepperTimer = null;
var maxPeppers = 24; // Here you may set max peppers to be created
const pepperHeight = 85;
const pepperWidth = 121;
var pepperSrc = ['./img/T4c0_Pepper.png'];
var pepperImage = {};
var promiseArray = pepperSrc.map(function(imgurl){
var prom = new Promise(function(resolve,reject){
var img = new Image();
img.onload = function(){
pepperImage[imgurl] = img;
resolve();
};
img.src = imgurl;
});
return prom;
});
Promise.all(promiseArray).then(init);
function init() {
//Canvas on Page
canvas = document.getElementById('canvasRain');
context = canvas.getContext("2d");
//Buffer Canvas
bufferCanvas = document.createElement("canvas");
bufferCanvasCtx = bufferCanvas.getContext("2d");
bufferCanvasCtx.canvas.width = context.canvas.width;
bufferCanvasCtx.canvas.height = context.canvas.height;
pepperTimer = setInterval(addPepper, 200);
Draw();
setInterval(animate, 30);
}
function animate() {
Update();
Draw();
}
function addPepper() {
pepperArray[pepperArray.length] = new Pepper();
if (pepperArray.length == maxPeppers)
clearInterval(pepperTimer);
}
function blank() {
bufferCanvasCtx.fillStyle = "rgba(0,0,0,0.8)";
bufferCanvasCtx.fillRect(0, 0, bufferCanvasCtx.canvas.width, bufferCanvasCtx.canvas.height);
}
function Update() {
for (var i = 0; i < pepperArray.length; i++) {
if (pepperArray[i].y < context.canvas.height) {
pepperArray[i].y += pepperArray[i].speed;
if (pepperArray[i].y > context.canvas.height)
pepperArray[i].y = -5;
pepperArray[i].x += pepperArray[i].drift;
if (pepperArray[i].x > context.canvas.width)
pepperArray[i].x = 0;
}
}
}
function Pepper() {
this.x = Math.round(Math.random() * context.canvas.width);
this.y = -10;
this.drift = Math.random();
this.speed = Math.round(Math.random() * 5) + 6;
this.width = pepperWidth;
this.height = pepperHeight;
}
function Draw() {
context.save();
blank();
for (var i = 0; i < pepperArray.length; i++) {
bufferCanvasCtx.fillStyle = "white";
bufferCanvasCtx.fillRect(pepperArray[i].x, pepperArray[i].y, pepperArray[i].width, pepperArray[i].height);
}
context.drawImage(bufferCanvas, 0, 0, bufferCanvas.width, bufferCanvas.height);
context.restore();
}
</script>
</body>
Use the onload property to know when to fill.
var blueprint_background = new Image();
blueprint_background.src = 'https://your_image_source.com/image.png';
blueprint_background.onload = function(){
var pattern = context.createPattern(this, "repeat");
context.fillStyle = pattern;
context.rect(x,y,width,height);
context.fill();
};
How can I embed use a file selector in this code instead of specifying the image source?
I found these two pieces of code and I'm quite new to Java. Essentially I'd like to be able to select the image from a file selector (like the first piece of code) instead of specifying the url of an image. Also, is there a way that I could output a list of all the coordinates to the console pr ideally create a txt file with the coords in?
I've left links to jsfiddle for both
thank you!!
http://jsfiddle.net/edprattt/m2a1j8yf/
https://jsfiddle.net/edprattt/8xqo71Lk/
##1
function showImage(src, target) {
var fr = new FileReader();
fr.onload = function(){
target.src = fr.result;
}
fr.readAsDataURL(src.files[0]);
}
function putImage() {
var src = document.getElementById("select_image");
var target = document.getElementById("target");
showImage(src, target);
}
##2
var canvas = document.getElementById('Canvas');
var context = canvas.getContext("2d");
var mapSprite = new Image();
mapSprite.src = "http://www.retrogameguide.com/images/screenshots/snes-legend-of-zelda-linkto-the-past-8.jpg";
var Marker = function () {
this.Sprite = new Image();
this.Sprite.src = "http://www.clker.com/cliparts/w/O/e/P/x/i/map-marker-hi.png"
this.Width = 12;
this.Height = 20;
this.XPos = 0;
this.YPos = 0;
}
var Markers = new Array();
var mouseClicked = function (mouse) {
// Get corrent mouse coords
var rect = canvas.getBoundingClientRect();
var mouseXPos = (mouse.x - rect.left);
var mouseYPos = (mouse.y - rect.top);
console.log("Marker added");
var marker = new Marker();
marker.XPos = mouseXPos - (marker.Width / 2);
marker.YPos = mouseYPos - marker.Height;
Markers.push(marker);
}
canvas.addEventListener("mousedown", mouseClicked, false);
var firstLoad = function () {
context.font = "15px Georgia";
context.textAlign = "center";
}
firstLoad();
var main = function () {
draw();
};
var draw = function () {
// Clear Canvas
context.fillStyle = "#000";
context.fillRect(0, 0, canvas.width, canvas.height);
// Draw map
// Sprite, X location, Y location, Image width, Image height
// You can leave the image height and width off, if you do it will draw the image at default size
context.drawImage(mapSprite, 0, 0, 700, 700);
// Draw markers
for (var i = 0; i < Markers.length; i++) {
var tempMarker = Markers[i];
// Draw marker
context.drawImage(tempMarker.Sprite, tempMarker.XPos, tempMarker.YPos, tempMarker.Width, tempMarker.Height);
// Calculate postion text
var markerText = "Postion (X:" + tempMarker.XPos + ", Y:" + tempMarker.YPos;
// Draw a simple box so you can see the position
var textMeasurements = context.measureText(markerText);
context.fillStyle = "#666";
context.globalAlpha = 0.7;
context.fillRect(tempMarker.XPos - (textMeasurements.width / 2), tempMarker.YPos - 15, textMeasurements.width, 20);
context.globalAlpha = 1;
// Draw position above
context.fillStyle = "#000";
context.fillText(markerText, tempMarker.XPos, tempMarker.YPos);
}
};
setInterval(main, (1000 / 60)); // Refresh 60 times a second
Change image source created by context.drawimage
This code allow me to draw cross, with its (x,y) coordinates, one by one with 5 seconds of interval , it works fine :
<script src="http://alertifyjs.com/build/alertify.js"></script>
<link rel="stylesheet" href="http://alertifyjs.com/build/css/alertify.css" />
<link rel="stylesheet" href="http://alertifyjs.com/build/css/themes/default.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<div style="width : 75%;margin : auto;">
<canvas id="Canvas" width="954" height="267"></canvas>
<button class="play">Play</button>
<button class="pause">Pause</button>
</div>
<script>
var canvas = document.getElementById('Canvas');
var context = canvas.getContext("2d");
// Map sprite
var mapSprite = new Image();
mapSprite.src = "v1.png";
var array_x = [351,315,353,352,318,485,351,748,568,645,373,350,572,374,650,240,240,320,707,235,402,539,256,410,433,405,353,745,404,320,514,322,692,474,293,418,418,690,237,513,378,478,433,405,285,429,458,622,568,536,564,389,641,534,567,454,575,482,459,539,431,327,464,374,348,520,279,378,509,516,232,744,351,710,481,540,429,642,537,459,513,689,324,463,375,747,431,265,484,591,458,460,485,407,720,483,376,520,691,376,232,413,536,430,653,714,484,715,629,573,263,408,436,300,544,407,432,568,536,462,485,346,610,524];
var array_y = [18,18,181,228,60,232,34,32,26,37,65,62,228,180,91,83,83,81,88,62,35,65,52,155,23,90,94,95,230,232,15,105,37,68,47,186,186,93,14,65,22,10,230,68,18,91,226,22,150,227,89,43,76,92,62,12,187,96,78,33,35,180,151,230,151,154,95,96,31,233,39,77,79,20,30,165,65,51,18,62,96,19,150,33,79,19,35,23,210,20,180,95,184,19,76,64,36,186,73,151,26,192,153,156,24,36,165,97,85,78,77,101,184,22,177,212,210,166,79,210,150,168,45,18];
var isPaused = false;
var firstLoad = function () {
context.font = "15px Georgia";
context.textAlign = "center";
}
firstLoad();
var main = function () {
draw();
};
var draw = function () {
// Clear Canvas
context.fillStyle = "#000";
context.fillRect(0, 0, canvas.width, canvas.height);
// Draw map
context.drawImage(mapSprite, 0, 0, 954, 267);
//draw red cross
cross = new Image();
cross.src = "cross.png";
// draw blue cross
cross1 = new Image();
cross1.src = "cross-blue.png";
var t = window.setInterval(function() { if(!isPaused) { event_coor(); } }, 5000);
i=0;
function event_coor() {
if (i < array_x.length) {
context.drawImage(cross, array_x[i], array_y[i], 10, 10);
i=i+1;
}
}
}
mapSprite.addEventListener('load', main);
//with jquery
$('.pause').on('click', function(e) {
e.preventDefault();
isPaused = true;
});
$('.play').on('click', function(e) {
e.preventDefault();
isPaused = false;
});
</script>
What I want to do is to change the color of the image cross that will be displayed under mapSprite, let's say displaying it in red cross.png and after displaying the second one, the oldest will turn to blue cross-blue.png at the same time. As that I will always have the last one in red to catch the attention.
How to change le last image source context.drawimage after few seconds?
Thanks a lot.
EDIT 1 : Redraw above the last one after 2seconds
<script src="http://alertifyjs.com/build/alertify.js"></script>
<link rel="stylesheet" href="http://alertifyjs.com/build/css/alertify.css" />
<link rel="stylesheet" href="http://alertifyjs.com/build/css/themes/default.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<div style="width : 75%;margin : auto;">
<canvas id="Canvas" width="954" height="267"></canvas>
<button class="play">Play</button>
<button class="pause">Pause</button>
</div>
<script>
var canvas = document.getElementById('Canvas');
var context = canvas.getContext("2d");
// Map sprite
var mapSprite = new Image();
mapSprite.src = "v1.png";
var array_x = [351,315,353,352,318,485,351,748,568,645,373,350,572,374,650,240,240,320,707,235,402,539,256,410,433,405,353,745,404,320,514,322,692,474,293,418,418,690,237,513,378,478,433,405,285,429,458,622,568,536,564,389,641,534,567,454,575,482,459,539,431,327,464,374,348,520,279,378,509,516,232,744,351,710,481,540,429,642,537,459,513,689,324,463,375,747,431,265,484,591,458,460,485,407,720,483,376,520,691,376,232,413,536,430,653,714,484,715,629,573,263,408,436,300,544,407,432,568,536,462,485,346,610,524];
var array_y = [18,18,181,228,60,232,34,32,26,37,65,62,228,180,91,83,83,81,88,62,35,65,52,155,23,90,94,95,230,232,15,105,37,68,47,186,186,93,14,65,22,10,230,68,18,91,226,22,150,227,89,43,76,92,62,12,187,96,78,33,35,180,151,230,151,154,95,96,31,233,39,77,79,20,30,165,65,51,18,62,96,19,150,33,79,19,35,23,210,20,180,95,184,19,76,64,36,186,73,151,26,192,153,156,24,36,165,97,85,78,77,101,184,22,177,212,210,166,79,210,150,168,45,18];
var isPaused = false;
var firstLoad = function () {
context.font = "15px Georgia";
context.textAlign = "center";
}
firstLoad();
var main = function () {
draw();
};
var draw = function () {
// Clear Canvas
context.fillStyle = "#000";
context.fillRect(0, 0, canvas.width, canvas.height);
// Draw map
context.drawImage(mapSprite, 0, 0, 954, 267);
//draw red cross
cross = new Image();
cross.src = "cross.png";
// draw blue cross
cross1 = new Image();
cross1.src = "cross-blue.png";
var t = window.setInterval(function() { if(!isPaused) { event_coor(); } }, 5000);
i=0;
function event_coor() {
if (i < array_x.length) {
context.drawImage(cross, array_x[i], array_y[i], 10, 10);
window.setInterval (function () { context.drawImage(cross1, array_x[i], array_y[i], 10, 10);}, 2000);
i=i+1;
}
}
}
mapSprite.addEventListener('load', main);
//with jquery
$('.pause').on('click', function(e) {
e.preventDefault();
isPaused = true;
});
$('.play').on('click', function(e) {
e.preventDefault();
isPaused = false;
});
</script>
You have to redraw the whole scene, or if the cross is not overlapped by other elements / has solid color, just the cross. There is no way to change the src of already rendered element, since there is no history (scene graph) of what has been drawn on canvas previously.
Make drawable field editable with canvas html
I want to resize the canvas field like paint app in javascript how can I do ? My html file is : <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="paint.css"> <title>Paint</title> </head> <body> <canvas id="canvas" style="border: solid 1px black">Your Browser does not support Canvas, please upgrade</canvas> <script src="paint.js"></script> </body> </html> Thanks !
It turned out to be a bit more complex.
Resizing the canvas clears it, therefore you need to do it this way:
create a new canvas
assign the dimensions
draw the old canvas over the new canvas
replace the old canvas with the new canvas
//Base canvas and dimensions
var canvas = document.body.appendChild(document.createElement("canvas"));
var width = canvas.height = canvas.width = 400;
var height = width;
var ctx = canvas.getContext("2d");
//Drawing variables
var lastPosition = null;
var drawing = false;
//Drawing functionality
function startDraw() {
drawing = true;
}
canvas.onmousedown = startDraw;
function stopDraw() {
drawing = false;
}
canvas.onmouseup = stopDraw;
canvas.onmouseleave = stopDraw;
function mouseMove(evt) {
var pos = {
x: evt.offsetX,
y: evt.offsetY
};
if (lastPosition !== null && drawing === true) {
ctx.beginPath();
ctx.moveTo(lastPosition.x, lastPosition.y);
ctx.lineTo(pos.x, pos.y);
ctx.closePath();
ctx.stroke();
}
lastPosition = pos;
}
canvas.onmousemove = mouseMove;
//Resizer functions
var resizerX = document.body.appendChild(document.createElement("button"));
resizerX.innerHTML = "Resize X";
resizerX.onclick = function() {
var newValue = null;
while (isNaN(newValue) || newValue < 10) {
newValue = parseInt(prompt("Insert new width", width.toString()));
}
var c = document.createElement("canvas");
width = newValue;
c.width = width;
c.height = height;
ctx = c.getContext("2d");
ctx.drawImage(canvas, 0, 0);
canvas.parentNode.replaceChild(c, canvas);
canvas = c;
canvas.onmousedown = startDraw;
canvas.onmouseup = stopDraw;
canvas.onmouseleave = stopDraw;
canvas.onmousemove = mouseMove;
};
var resizerY = document.body.appendChild(document.createElement("button"));
resizerY.innerHTML = "Resize Y";
resizerY.onclick = function() {
var newValue = null;
while (isNaN(newValue) || newValue < 10) {
newValue = parseInt(prompt("Insert new height", height.toString()));
}
var c = document.createElement("canvas");
height = newValue;
c.width = width;
c.height = height;
ctx = c.getContext("2d");
ctx.drawImage(canvas, 0, 0);
canvas.parentNode.replaceChild(c, canvas);
canvas = c;
canvas.onmousedown = startDraw;
canvas.onmouseup = stopDraw;
canvas.onmouseleave = stopDraw;
canvas.onmousemove = mouseMove;
};
canvas {
background-color: #eee
}
canvas image size in html5
var canvas = document.getElementById("canvasPnl");
var context = canvas.getContext('2d');
var locationtxt = "Latitude: " + position.coords.latitude + ", Longitude: " + position.coords.longitude;
var imageObj = new Image();
imageObj.src = document.getElementById("tempImg").src;
imageObj.onload = function () {
var x = 188;
var y = 30;
var width = 200;
var height = 137;
context.drawImage(imageObj, x, y, width, height);
context.font = "20pt Calibri";
context.fillText(locationtxt, 40, 40);
};
<canvas id="canvasPnl" width="132" height="120" style="border:0px solid #d3d3d3;"></canvas>
The size of the image is becoming bigger and it is not fitting in canvas and also the image is rotated.
How to get original image in canvas?
Ok, take a look at your reworked code below.
Notice "imageObj.src = document.getElementById("tempImg").src;" must go after imageObj.onload.
I have no access to your locationtxt or your tempImg, so I assume you are sure they are not the source of your problem.
This line of code will take an image of ANY size and force it to fit in your specified canvas size by scaling it. When it scales, you may get image distortion if your canvas size is not proportional to your image size.
context.drawImage(imageObj,0,0,imageObj.width,imageObj.height,0,0,canvas.width,canvas.height);
Here is your code -- just modified a bit :)
var canvas = document.getElementById("canvasPnl");
var context = canvas.getContext('2d');
var locationtxt = "Latitude: " + position.coords.latitude + ", Longitude: " + position.coords.longitude;
var imageObj = new Image();
imageObj.onload = function () {
context.drawImage(imageObj,0,0,imageObj.width,imageObj.height,0,0,canvas.width,canvas.height);
context.font = "20pt Calibri";
context.fillText(locationtxt, 40, 40);
};
imageObj.src = document.getElementById("tempImg").src;
<html>
<head>
<title></title>
</head>
<style type="text/css">
#mycanvas
{
border: 1px solid black;
}
</style>
<script type="text/javascript">
window.addEventListener('load', function () {
var img = new Image, ctx = document.getElementById('myCanvas').getContext('2d');
var img1=new Image;
img.src = 'ship.png';
img1.src='3D025.jpg';
img.addEventListener('load', function () {
var width = img.naturalWidth; // this will be 300
var height = img.naturalHeight; // this will be 400
var interval = setInterval(function() {
var x = 260, y = 0;
return function () {
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
ctx.drawImage(img1, 0, y);
ctx.drawImage(img, x, 300,width,height);
x += 1;
if (x > ctx.canvas.width) {
x = 260;
width=width-10;
height=height-10;
ctx.drawImage(img, x, 300,width,height);
}
if (x == 750) {
x = 260;
}
};
}(), 1000/40);
}, false);
}, false);
</script>
<body>
<canvas id="myCanvas" height="600" width="1000"></canvas>
</body>
</html>