Skip to content
Permalink
Browse files
Tweak puzzle to use feature detection
https://bugs.webkit.org/show_bug.cgi?id=233946

Unreviewed.


* blog-files/wide-gamut-canvas/puzzle.html:



Canonical link: https://commits.webkit.org/244932@main
git-svn-id: https://svn.webkit.org/repository/webkit/trunk@286608 268f45cc-cd09-0410-ab3c-d52691b4dbfc
  • Loading branch information
heycam committed Dec 7, 2021
1 parent a122ee0 commit f609322c08bca8e78bc8c3ae3b5a6c07f9a45574
Show file tree
Hide file tree
Showing 2 changed files with 23 additions and 3 deletions.
@@ -1,3 +1,12 @@
2021-12-07 Cameron McCormack <heycam@apple.com>

Tweak puzzle to use feature detection
https://bugs.webkit.org/show_bug.cgi?id=233946

Unreviewed.

* blog-files/wide-gamut-canvas/puzzle.html:

2021-11-30 Cameron McCormack <heycam@apple.com>

Add resources for an upcoming blog post
@@ -2,14 +2,18 @@
<meta charset=utf-8>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body { text-align: center; white-space: nowrap; }
body { text-align: center; white-space: nowrap; font: 16px Helvetica, sans-serif; }
img, #puzzleboard { box-shadow: 0 0 4px black; }
img { margin: 32px 8px 0; }
#puzzleboard { display: inline-flex; flex-direction: column; background-color: tan; padding: 16px; border-radius: 8px; }
canvas { border: 2px solid; border-color: rgba(0, 0, 0, 0.2) rgba(255, 255, 255, 0.2) rgba(255, 255, 255, 0.2) rgba(0, 0, 0, 0.2); background-color: rgba(255, 255, 255, 0.2); padding: 2px; }
label { padding-top: 16px; font: bold 16px Helvetica, sans-serif; color: #864; text-shadow: 0px 2px 0px rgba(255, 255, 255, 0.3); color: rgb(104, 90, 70); border-radius: 8px; -webkit-user-select: none; user-select: none; text-align: center; }
label { padding-top: 16px; font-weight: bold; color: #864; text-shadow: 0px 2px 0px rgba(255, 255, 255, 0.3); color: rgb(104, 90, 70); border-radius: 8px; -webkit-user-select: none; user-select: none; text-align: center; }
input { vertical-align: middle; }
label span { display: none; }
.warning { display: none; }
.unsupported .warning { display: block; position: absolute; top: 0; left: 0; right: 0; }
.warning span { background-color: rgba(0, 0, 0, 0.5); padding: 4px; border; border-radius: 4px; color: white; }
.unsupported label { text-decoration: line-through; }
@media (prefers-color-scheme: dark) {
html { background-color: black; }
img, #puzzleboard { box-shadow: 0 0 4px #fff8; }
@@ -178,7 +182,13 @@
canvas.style.width = `${width / scale}px`;
canvas.style.height = `${height / scale}px`;

ctx = canvas.getContext("2d", { colorSpace });
try {
ctx = canvas.getContext("2d", { colorSpace });
} catch {
ctx = canvas.getContext("2d");
document.body.className = "unsupported";
}

drawBoard();
}

@@ -245,3 +255,4 @@
<div id="placeholder"></div>
<label><input id=displayP3 type=checkbox onchange="updateCanvas()"> Use Display P3 <span>canvas</span></label>
</div>
<div class="warning"><span>This browser does not support Display P3 canvas.</span></div>

0 comments on commit f609322

Please sign in to comment.