html
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
</head>
<body>
<div id="scratch"></div>
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<script src="https://dl.dropbox.com/s/46vqvq4dqwqjdfn/wScratchPad.min.js"></script>
<script type="text/javascript">
swal({
title: "Scratch",
text: "Scratch on the screen!!",
icon: "info",
button: "Start Scratch!",
});
$('#scratch').wScratchPad({
size: 45,
bg: 'https://i.imgur.com/zaCtoGt.jpg',
fg: '#000',
});
</script>
</body>
</html>
Enter to Rename, Shift+Enter to Preview
css
css
1
2
3
4
5
6
7
8
9
10
11
12
body{
margin:0px;
padding:0px;
box-sizing:border-box;
user-select: none;
}
#scratch {
position:relative;
width:100vw;
height:100vh;
}
Enter to Rename, Shift+Enter to Preview
js
js
1
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run