-
Notifications
You must be signed in to change notification settings - Fork 0
/
main.js
102 lines (85 loc) · 2.86 KB
/
main.js
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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
$(document).ready(function() {
// Set up the canvas
var canvas = document.getElementById('penguinName');
var ctx = canvas.getContext('2d');
canvas.width = 600;
canvas.height = 330
// Create a new image variable for the background
var bgImage = new Image();
// Create empty array to hold the name
var penName = [];
// For element ID title, on change if penName is longer than 1, remove first item and add selected value, otherwise add the selected value.
$('#title').change(function() {
if (penName.length > 1) {
penName.shift();
let title = $(this).val();
penName.splice(0, 0, title + ' ');
} else {
let title = $(this).val();
penName.splice(0, 0, title + ' ');
}
});
// Find radio button with name fn, remove array item at index 1 and add value of selected radio at array index 1
$('input:radio[name="fn"]').change(function() {
if ($(this).is(':checked')) {
let name = $(this).val()
penName.splice(1, 1, name + ' ');
}
});
// Find radio button with name mn, remove array item at index 2 and add value of selected radio at array index 2
$('input:radio[name="mn"]').change(function() {
if ($(this).is(':checked')) {
let name = $(this).val()
penName.splice(2, 2, name);
}
});
// Find radio button with name sn, remove array item at index 3 and add value of selected radio at array index 3
$('input:radio[name="sn"]').change(function() {
if ($(this).is(':checked')) {
let name = $(this).val()
penName.splice(3, 3, name);
}
});
// Use data from image inputs in HTML as source for bgImage
$.fn.pickImg = function() {
this.click(imgClick)
function imgClick() {
bgImage.src = $(this).data('img');
};
};
// Plugin to draw the array to canvas on click.
$.fn.showText = function() {
this.click(drawImage)
function drawImage() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(bgImage, 0, 0, 600, 330)
ctx.fillStyle = '#FFF';
ctx.font = '25pt impact';
ctx.textBaseline = 'bottom';
ctx.lineWidth = 2;
ctx.strokeStyle = "black";
ctx.fillText(penName.join(''), 25, 300);
ctx.strokeText(penName.join(''), 25, 300);
}
}
// Clear the canvas
$('#clear').on('click', function() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
});
/*var download = document.getElementByID('img-download');
download.addEventListener('click', prepareDownload, false);
function prepareDownload() {
var data = canvas.toDataURL();
download.href = data;
}*/
// Call postImage plugin on post button
//$('#post').postImage();
// Call showText plugin on show button
$('#showName').showText();
// Call pickImg plugin on image buttons
$('#img1').pickImg();
$('#img2').pickImg();
$('#img3').pickImg();
$('#img4').pickImg();
$('#img5').pickImg();
});