Skip to content

Instantly share code, notes, and snippets.

@esafwan

esafwan/index.html

Forked from anonymous/index.html
Created April 7, 2016 21:18
Show Gist options
  • Save esafwan/1fd5c19e85c4509d138435c2e30587d9 to your computer and use it in GitHub Desktop.
Save esafwan/1fd5c19e85c4509d138435c2e30587d9 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE HTML>
<html>
<head>
<style id="jsbin-css">
body {
margin: 0px;
padding: 0px;
}
#Canvas, #profile {border: 1px red solid;}
#profile {
position: relative;
left:100px;
top:-280px
}
</style>
</head>
<body>
<input type='file' id="fileUpload" />
<hr>
<canvas id="Canvas" width="300" height="300"></canvas>
<canvas id="profile" width="100" height="100"> </canvas>
<button id="btn" onClick="rectangle">Create</button>
<script id="jsbin-javascript">
var canvas = document.getElementById('Canvas');
var fileLoader = document.getElementById('fileUpload');
fileLoader.addEventListener('change', handleImage, false);
canvas.addEventListener('change', handleImage, false);
var ctx_main = canvas.getContext('2d');
/*
do cool things with the context
*/
ctx_main.font = '12pt Arial';
ctx_main.fillStyle = 'blue';
ctx_main.fillText('Hello World!', 10, 100);
/* cool stuff over */
function handleImage(e){
var reader = new FileReader();
reader.onload = function(event){
var img = new Image();
img.onload = function(){
//canvas.width = img.width;
//canvas.height = img.height;
ctx_main.drawImage(img,0,0);
};
img.src = event.target.result;
};
reader.readAsDataURL(e.target.files[0]);
}
function rectangle(){
}
</script>
<script id="jsbin-source-html" type="text/html"><!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<input type='file' id="fileUpload" />
<hr>
<canvas id="Canvas" width="300" height="300"></canvas>
<canvas id="profile" width="100" height="100"> </canvas>
<button id="btn" onClick="rectangle">Create</button>
</body>
</html> </script>
<script id="jsbin-source-css" type="text/css"> body {
margin: 0px;
padding: 0px;
}
#Canvas, #profile {border: 1px red solid;}
#profile {
position: relative;
left:100px;
top:-280px
}</script>
<script id="jsbin-source-javascript" type="text/javascript">var canvas = document.getElementById('Canvas');
var fileLoader = document.getElementById('fileUpload');
fileLoader.addEventListener('change', handleImage, false);
canvas.addEventListener('change', handleImage, false);
var ctx_main = canvas.getContext('2d');
/*
do cool things with the context
*/
ctx_main.font = '12pt Arial';
ctx_main.fillStyle = 'blue';
ctx_main.fillText('Hello World!', 10, 100);
/* cool stuff over */
function handleImage(e){
var reader = new FileReader();
reader.onload = function(event){
var img = new Image();
img.onload = function(){
//canvas.width = img.width;
//canvas.height = img.height;
ctx_main.drawImage(img,0,0);
};
img.src = event.target.result;
};
reader.readAsDataURL(e.target.files[0]);
}
function rectangle(){
}
</script></body>
</html>
Raw
jsbin.codipijuha.css
body {
margin: 0px;
padding: 0px;
}
#Canvas, #profile {border: 1px red solid;}
#profile {
position: relative;
left:100px;
top:-280px
}
Raw
jsbin.codipijuha.js
var canvas = document.getElementById('Canvas');
var fileLoader = document.getElementById('fileUpload');
fileLoader.addEventListener('change', handleImage, false);
canvas.addEventListener('change', handleImage, false);
var ctx_main = canvas.getContext('2d');
/*
do cool things with the context
*/
ctx_main.font = '12pt Arial';
ctx_main.fillStyle = 'blue';
ctx_main.fillText('Hello World!', 10, 100);
/* cool stuff over */
function handleImage(e){
var reader = new FileReader();
reader.onload = function(event){
var img = new Image();
img.onload = function(){
//canvas.width = img.width;
//canvas.height = img.height;
ctx_main.drawImage(img,0,0);
};
img.src = event.target.result;
};
reader.readAsDataURL(e.target.files[0]);
}
function rectangle(){
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment