brozek/sketch
Archived
1
0
Fork 0
Code Activity

Uploading sketchpad project using HTML5 Canvas

Browse source
This commit is contained in:
Brandon Rozek 2021-05-16 12:32:21 -04:00
commit 09d58fb9fd
5 changed files with 110 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
index.html Normal file
View file

@ -0,0 +1,30 @@
<!Doctype html>
<html lang='en'>
<head>
<meta charset='utf-8'/>
<meta name='viewport' content='initial-scale=1, width=device-width'/>
<title>Sketch</title>
<link rel='stylesheet' href='style.css'/>
</head>
<body>
<canvas id='sketchpad'></canvas>
<input type='button' value='Show Menu' class='reveal-controls'/>
<section class='controls' style='display: none;'>
<div>
<input value='Hide' class='hide-button' type='button'/>
</div>
<div>
<label>Color <input class='color-picker' type='color'/></label>
<label>Width <input type='range' class='size-picker' min='1' max='50' value='1' /></label>
<input class='undo' value='Undo' type='button'/>
<input class='redo' value='Redo' type='button'/>
</div>
<div>
<input value='Save' class='save' type='button'/>
</div>
</section>
<script src='jquery.js'></script>
<script src='sketchpad.js'></script>
<script src='script.js'></script>
</body>
</html>

6
jquery.js vendored Normal file
View file

File diff suppressed because one or more lines are too long

47
script.js Normal file
View file

@ -0,0 +1,47 @@
var sketchpad = null;
$(document).ready(function() {
sketchpad = new Sketchpad({
element: '#sketchpad',
width: window.innerWidth,
height: window.innerHeight,
});
});
$(window).on('resize', function() {
sketchpad.reset();
});
$('.reveal-controls').on('click', function() {
$('.controls').show().addClass('slideInUp');
$(this).hide();
})
$('.hide-button').on('click', function() {
$('.reveal-controls').show();
$('.controls').hide();
})
$('.color-picker').on('change', function(event) {
sketchpad.color = $(event.target).val();
})
$('.size-picker').on('change', function(event) {
sketchpad.penSize = $(event.target).val();
})
$('.undo').on('click', function() {
sketchpad.undo();
});
$('.redo').on('click', function() {
sketchpad.redo();
});
var upload = function() {
var now = Date.now();
var formData = new FormData();
formData.append(now, sketchpad.canvas.toDataURL().replace('data:image/png;base64,', ''));
var request = new XMLHttpRequest();
request.open("POST", "/new/sketch/");
request.onload = function(event) { window.location = "/files/" + new Date().getFullYear() + "/" + ((new Date().getMonth() + 1 < 10)? "0" + String(new Date().getMonth() + 1): String(new Date().getMonth() + 1)) + "/" + now + ".png"; };
request.send(formData);
}

1
sketchpad.js Normal file
View file

File diff suppressed because one or more lines are too long

26
style.css Normal file
View file

@ -0,0 +1,26 @@
.reveal-controls {
position: absolute;
bottom: 0;
left: 0;
margin-bottom: .5rem;
margin-left: .5rem;
}
body {
margin: 0;
}
canvas {
display: block;
}
.controls {
display: flex;
justify-content: space-between;
position: absolute;
bottom: 0;
width: 100%;
box-sizing: border-box;
padding: 1rem;
background-color: #FEF;
}
input[type=range] {
background-color: #DFD;
}