Skip to content

Commit 29f4617

Browse files
committed
Use png canvas export to download final image
1 parent b640c03 commit 29f4617

File tree

2 files changed

+8
-4
lines changed

2 files changed

+8
-4
lines changed

results.html

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@ <h2>Closest Match: <span class="weight-300" id="ideology-label"></span></h2>
5151
<p>Ideological matching is a work in progress, and is much less accurate than the values and axes.</p>
5252
<p>You can send these results by copying and pasting the URL at the top of the page or using the image below. Think your matched ideology was wrong? Want to help us calibrate the test? Send the results along with your political ideology to us at [email protected], or send us any comments, questions, or criticism. </p>
5353
<hr/>
54-
<canvas id="banner" width=800 height=650 style="font-family:Montserrat"></canvas>
54+
<img src="" id="banner">
5555
<button class="button" onclick="location.href='index.html';" style="background-color: #2196f3;">Back</button> <br>
5656
<!-- Website visit statistics - no personal information is collected! -->
5757
<script type="text/javascript">
@@ -155,10 +155,12 @@ <h2>Closest Match: <span class="weight-300" id="ideology-label"></span></h2>
155155
}
156156

157157
window.onload = function() {
158-
var c = document.getElementById("banner")
158+
var c = document.createElement("canvas")
159159
var ctx = c.getContext("2d")
160+
c.width = 800;
161+
c.height = 650;
160162
ctx.fillStyle = "#EEEEEE"
161-
ctx.fillRect(0,0,800,600)
163+
ctx.fillRect(0,0,800,650);
162164

163165
img = document.getElementById("img-equality")
164166
ctx.drawImage(img, 20, 170, 100, 100);
@@ -224,6 +226,8 @@ <h2>Closest Match: <span class="weight-300" id="ideology-label"></span></h2>
224226
ctx.fillText("Diplomatic Axis: " + document.getElementById("diplomatic-label").innerHTML, 400, 295)
225227
ctx.fillText("Civil Axis: " + document.getElementById("state-label").innerHTML, 400, 415)
226228
ctx.fillText("Societal Axis: " + document.getElementById("society-label").innerHTML, 400, 535)
229+
230+
document.getElementById("banner").src = c.toDataURL();
227231
}
228232
</script>
229233
</body>

style.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -182,7 +182,7 @@ div.tradition {
182182
span.weight-300 {
183183
font-weight: 300;
184184
}
185-
canvas {
185+
#banner {
186186
border-color: #444444;
187187
border-style: solid;
188188
border-width: 2px;

0 commit comments

Comments
 (0)