Getting the canvas to be transparent
So I found a wave style I liked on codepen. I'm not gonna go through design my own I want to focus on the backend of my website rather then UI. But still want stunning UI. Anyways I want to know if anyone would know how to make the canvas so that it is transparent.
I have an app that I've created its a simple splash page. I just want to make it so when a user presses more info the wave moves up and allows the user to accept terms of use...
Here is a link to the code pen:
https://codepen.io/RTarson/pen/375507d01a90fd265b030abec49b78ac
/*========================================
Wave
========================================*/
$.wave = function (color, amp, height, comp) {
$.ctx.beginPath();
var sway = $.simplex.noise2D($.goff, 0) * amp;
for (var i = 0; i <= $.count; i++) {
$.xoff += $.xinc;
var x = $.cx - $.length / 2 + $.length / $.count * i,
y = height + $.simplex.noise2D($.xoff, $.yoff) * amp + sway;
$.ctx[i === 0 ? 'moveTo' : 'lineTo'](x, y);
}
$.ctx.lineTo($.w, -$.h); // -$.h - Vertically reflection
$.ctx.lineTo(0, -$.h); // -$.h - Vertically reflection
$.ctx.closePath();
$.ctx.fillStyle = color;
if (comp) {
$.ctx.globalCompositeOperation = comp;
}
$.ctx.fill();
};
Again I'm looking for how to get the canvas to display what ever is behind it. The rest is straight forward.
javascript css babeljs
asked Jan 19 at 3:25
RTarsonRTarson
289319
add a comment |
So I found a wave style I liked on codepen. I'm not gonna go through design my own I want to focus on the backend of my website rather then UI. But still want stunning UI. Anyways I want to know if anyone would know how to make the canvas so that it is transparent.
I have an app that I've created its a simple splash page. I just want to make it so when a user presses more info the wave moves up and allows the user to accept terms of use...
Here is a link to the code pen:
https://codepen.io/RTarson/pen/375507d01a90fd265b030abec49b78ac
/*========================================
Wave
========================================*/
$.wave = function (color, amp, height, comp) {
$.ctx.beginPath();
var sway = $.simplex.noise2D($.goff, 0) * amp;
for (var i = 0; i <= $.count; i++) {
$.xoff += $.xinc;
var x = $.cx - $.length / 2 + $.length / $.count * i,
y = height + $.simplex.noise2D($.xoff, $.yoff) * amp + sway;
$.ctx[i === 0 ? 'moveTo' : 'lineTo'](x, y);
}
$.ctx.lineTo($.w, -$.h); // -$.h - Vertically reflection
$.ctx.lineTo(0, -$.h); // -$.h - Vertically reflection
$.ctx.closePath();
$.ctx.fillStyle = color;
if (comp) {
$.ctx.globalCompositeOperation = comp;
}
$.ctx.fill();
};
Again I'm looking for how to get the canvas to display what ever is behind it. The rest is straight forward.
javascript css babeljs
asked Jan 19 at 3:25
RTarsonRTarson
289319
Possible duplicate of How do I make a transparent canvas in html5?
– David784
Jan 19 at 3:28
@David784 Already read that before showing me. didn't help
– RTarson
Jan 19 at 3:37
If I comment//$.ctx.fillStyle = "#182645";in your code pen, I can see your background through the waves. Your canvas is transparent, but the contents aren't.
– David784
Jan 19 at 3:43
@David784 yes but I only need the white part to be transparent
– RTarson
Jan 19 at 4:25
add a comment |
So I found a wave style I liked on codepen. I'm not gonna go through design my own I want to focus on the backend of my website rather then UI. But still want stunning UI. Anyways I want to know if anyone would know how to make the canvas so that it is transparent.
I have an app that I've created its a simple splash page. I just want to make it so when a user presses more info the wave moves up and allows the user to accept terms of use...
Here is a link to the code pen:
https://codepen.io/RTarson/pen/375507d01a90fd265b030abec49b78ac
/*========================================
Wave
========================================*/
$.wave = function (color, amp, height, comp) {
$.ctx.beginPath();
var sway = $.simplex.noise2D($.goff, 0) * amp;
for (var i = 0; i <= $.count; i++) {
$.xoff += $.xinc;
var x = $.cx - $.length / 2 + $.length / $.count * i,
y = height + $.simplex.noise2D($.xoff, $.yoff) * amp + sway;
$.ctx[i === 0 ? 'moveTo' : 'lineTo'](x, y);
}
$.ctx.lineTo($.w, -$.h); // -$.h - Vertically reflection
$.ctx.lineTo(0, -$.h); // -$.h - Vertically reflection
$.ctx.closePath();
$.ctx.fillStyle = color;
if (comp) {
$.ctx.globalCompositeOperation = comp;
}
$.ctx.fill();
};
Again I'm looking for how to get the canvas to display what ever is behind it. The rest is straight forward.
javascript css babeljs
asked Jan 19 at 3:25
RTarsonRTarson
289319
So I found a wave style I liked on codepen. I'm not gonna go through design my own I want to focus on the backend of my website rather then UI. But still want stunning UI. Anyways I want to know if anyone would know how to make the canvas so that it is transparent.
I have an app that I've created its a simple splash page. I just want to make it so when a user presses more info the wave moves up and allows the user to accept terms of use...
Here is a link to the code pen:
https://codepen.io/RTarson/pen/375507d01a90fd265b030abec49b78ac
/*========================================
Wave
========================================*/
$.wave = function (color, amp, height, comp) {
$.ctx.beginPath();
var sway = $.simplex.noise2D($.goff, 0) * amp;
for (var i = 0; i <= $.count; i++) {
$.xoff += $.xinc;
var x = $.cx - $.length / 2 + $.length / $.count * i,
y = height + $.simplex.noise2D($.xoff, $.yoff) * amp + sway;
$.ctx[i === 0 ? 'moveTo' : 'lineTo'](x, y);
}
$.ctx.lineTo($.w, -$.h); // -$.h - Vertically reflection
$.ctx.lineTo(0, -$.h); // -$.h - Vertically reflection
$.ctx.closePath();
$.ctx.fillStyle = color;
if (comp) {
$.ctx.globalCompositeOperation = comp;
}
$.ctx.fill();
};
Again I'm looking for how to get the canvas to display what ever is behind it. The rest is straight forward.
javascript css babeljs
javascript css babeljs
asked Jan 19 at 3:25
RTarsonRTarson
289319
asked Jan 19 at 3:25
RTarsonRTarson
289319
asked Jan 19 at 3:25
RTarsonRTarson
289319
asked Jan 19 at 3:25
RTarsonRTarson
289319
asked Jan 19 at 3:25
RTarsonRTarson
289319
289319
Possible duplicate of How do I make a transparent canvas in html5?
– David784
Jan 19 at 3:28
@David784 Already read that before showing me. didn't help
– RTarson
Jan 19 at 3:37
If I comment//$.ctx.fillStyle = "#182645";in your code pen, I can see your background through the waves. Your canvas is transparent, but the contents aren't.
– David784
Jan 19 at 3:43
@David784 yes but I only need the white part to be transparent
– RTarson
Jan 19 at 4:25
add a comment |
Possible duplicate of How do I make a transparent canvas in html5?
– David784
Jan 19 at 3:28
@David784 Already read that before showing me. didn't help
– RTarson
Jan 19 at 3:37
If I comment//$.ctx.fillStyle = "#182645";in your code pen, I can see your background through the waves. Your canvas is transparent, but the contents aren't.
– David784
Jan 19 at 3:43
@David784 yes but I only need the white part to be transparent
– RTarson
Jan 19 at 4:25
Possible duplicate of How do I make a transparent canvas in html5?
– David784
Jan 19 at 3:28
Possible duplicate of How do I make a transparent canvas in html5?
– David784
Jan 19 at 3:28
@David784 Already read that before showing me. didn't help
– RTarson
Jan 19 at 3:37
@David784 Already read that before showing me. didn't help
– RTarson
Jan 19 at 3:37
If I comment
//$.ctx.fillStyle = "#182645"; in your code pen, I can see your background through the waves. Your canvas is transparent, but the contents aren't.– David784
Jan 19 at 3:43
If I comment
//$.ctx.fillStyle = "#182645"; in your code pen, I can see your background through the waves. Your canvas is transparent, but the contents aren't.– David784
Jan 19 at 3:43
@David784 yes but I only need the white part to be transparent
– RTarson
Jan 19 at 4:25
@David784 yes but I only need the white part to be transparent
– RTarson
Jan 19 at 4:25
add a comment |
1 Answer
1
active
oldest
votes
Each canvas pixel has four 8-bit bytes of color information, one for red, one for green, one for blue and one for opacity. An opacity byte value of 0 is fully trasparent and a value of 255 corresponds to fully opaque.
All canvas pixels are transparent initially: the byte buffer for the canvas is zero filled.
If want the wave to be semi transparent, the colors used to create it need to have opacity information in their color value. Color strings show in the pen don't specify any alpha channel value and default to fully opaque.
Please check the MDN link, but I suspect the most reliable browser support will be for CSS color values in the format "rgba( red, geen, blue, alpha)".
answered Jan 19 at 4:19
traktor53traktor53
7,5701830
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54263822%2fgetting-the-canvas-to-be-transparent%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
Each canvas pixel has four 8-bit bytes of color information, one for red, one for green, one for blue and one for opacity. An opacity byte value of 0 is fully trasparent and a value of 255 corresponds to fully opaque.
All canvas pixels are transparent initially: the byte buffer for the canvas is zero filled.
If want the wave to be semi transparent, the colors used to create it need to have opacity information in their color value. Color strings show in the pen don't specify any alpha channel value and default to fully opaque.
Please check the MDN link, but I suspect the most reliable browser support will be for CSS color values in the format "rgba( red, geen, blue, alpha)".
answered Jan 19 at 4:19
traktor53traktor53
7,5701830
add a comment |
Each canvas pixel has four 8-bit bytes of color information, one for red, one for green, one for blue and one for opacity. An opacity byte value of 0 is fully trasparent and a value of 255 corresponds to fully opaque.
All canvas pixels are transparent initially: the byte buffer for the canvas is zero filled.
If want the wave to be semi transparent, the colors used to create it need to have opacity information in their color value. Color strings show in the pen don't specify any alpha channel value and default to fully opaque.
Please check the MDN link, but I suspect the most reliable browser support will be for CSS color values in the format "rgba( red, geen, blue, alpha)".
answered Jan 19 at 4:19
traktor53traktor53
7,5701830
add a comment |
Each canvas pixel has four 8-bit bytes of color information, one for red, one for green, one for blue and one for opacity. An opacity byte value of 0 is fully trasparent and a value of 255 corresponds to fully opaque.
All canvas pixels are transparent initially: the byte buffer for the canvas is zero filled.
If want the wave to be semi transparent, the colors used to create it need to have opacity information in their color value. Color strings show in the pen don't specify any alpha channel value and default to fully opaque.
Please check the MDN link, but I suspect the most reliable browser support will be for CSS color values in the format "rgba( red, geen, blue, alpha)".
answered Jan 19 at 4:19
traktor53traktor53
7,5701830
Each canvas pixel has four 8-bit bytes of color information, one for red, one for green, one for blue and one for opacity. An opacity byte value of 0 is fully trasparent and a value of 255 corresponds to fully opaque.
All canvas pixels are transparent initially: the byte buffer for the canvas is zero filled.
If want the wave to be semi transparent, the colors used to create it need to have opacity information in their color value. Color strings show in the pen don't specify any alpha channel value and default to fully opaque.
Please check the MDN link, but I suspect the most reliable browser support will be for CSS color values in the format "rgba( red, geen, blue, alpha)".
answered Jan 19 at 4:19
traktor53traktor53
7,5701830
answered Jan 19 at 4:19
traktor53traktor53
7,5701830
answered Jan 19 at 4:19
traktor53traktor53
7,5701830
answered Jan 19 at 4:19
traktor53traktor53
7,5701830
7,5701830
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54263822%2fgetting-the-canvas-to-be-transparent%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Possible duplicate of How do I make a transparent canvas in html5?
– David784
Jan 19 at 3:28
@David784 Already read that before showing me. didn't help
– RTarson
Jan 19 at 3:37
If I comment
//$.ctx.fillStyle = "#182645";in your code pen, I can see your background through the waves. Your canvas is transparent, but the contents aren't.– David784
Jan 19 at 3:43
@David784 yes but I only need the white part to be transparent
– RTarson
Jan 19 at 4:25