Draw image with transparent background on canvas
0
I need to draw an image with transparent background on canvas. I have a code that should do that:
var can = document.getElementById('canvasId');
var ctx = can.getContext('2d');
ctx.fillRect(50,50,500,500); // something in the background
var img = new Image();
img.onload = function() {
ctx.drawImage(img, 0, 0);
}
img.src = "https://i.stack.imgur.com/7JXBD.png"; //transparent png<canvas id="canvasId"></canvas>But the background is not transparent:
javascript html image html5-canvas transparent
edited Nov 13 '18 at 9:25
Luca Kiebel
7,30841431
asked Nov 13 '18 at 8:34
лолка лолковичлолка лолкович
31
add a comment |
0
I need to draw an image with transparent background on canvas. I have a code that should do that:
var can = document.getElementById('canvasId');
var ctx = can.getContext('2d');
ctx.fillRect(50,50,500,500); // something in the background
var img = new Image();
img.onload = function() {
ctx.drawImage(img, 0, 0);
}
img.src = "https://i.stack.imgur.com/7JXBD.png"; //transparent png<canvas id="canvasId"></canvas>But the background is not transparent:
javascript html image html5-canvas transparent
edited Nov 13 '18 at 9:25
Luca Kiebel
7,30841431
asked Nov 13 '18 at 8:34
лолка лолковичлолка лолкович
31
4
The actual image is not transparent.
– Jack Bashford
Nov 13 '18 at 8:38
So what background should be to add transparency effect? Can u give a link to actual transparent image then?
– лолка лолкович
Nov 13 '18 at 8:40
no specific background. PNG allows a 4th channel, the alpha channel. So every pixel has a red, green, blue and alpha value (opacity) between 0 and 255 (in case of 8bit PNG). Also see this link, for when to use which image format: stackoverflow.com/q/2336522
– MA-Maddin
Nov 13 '18 at 8:58
add a comment |
0
0
0
I need to draw an image with transparent background on canvas. I have a code that should do that:
var can = document.getElementById('canvasId');
var ctx = can.getContext('2d');
ctx.fillRect(50,50,500,500); // something in the background
var img = new Image();
img.onload = function() {
ctx.drawImage(img, 0, 0);
}
img.src = "https://i.stack.imgur.com/7JXBD.png"; //transparent png<canvas id="canvasId"></canvas>But the background is not transparent:
javascript html image html5-canvas transparent
edited Nov 13 '18 at 9:25
Luca Kiebel
7,30841431
asked Nov 13 '18 at 8:34
лолка лолковичлолка лолкович
31
I need to draw an image with transparent background on canvas. I have a code that should do that:
var can = document.getElementById('canvasId');
var ctx = can.getContext('2d');
ctx.fillRect(50,50,500,500); // something in the background
var img = new Image();
img.onload = function() {
ctx.drawImage(img, 0, 0);
}
img.src = "https://i.stack.imgur.com/7JXBD.png"; //transparent png<canvas id="canvasId"></canvas>But the background is not transparent:
var can = document.getElementById('canvasId');
var ctx = can.getContext('2d');
ctx.fillRect(50,50,500,500); // something in the background
var img = new Image();
img.onload = function() {
ctx.drawImage(img, 0, 0);
}
img.src = "https://i.stack.imgur.com/7JXBD.png"; //transparent png<canvas id="canvasId"></canvas>var can = document.getElementById('canvasId');
var ctx = can.getContext('2d');
ctx.fillRect(50,50,500,500); // something in the background
var img = new Image();
img.onload = function() {
ctx.drawImage(img, 0, 0);
}
img.src = "https://i.stack.imgur.com/7JXBD.png"; //transparent png<canvas id="canvasId"></canvas>javascript html image html5-canvas transparent
javascript html image html5-canvas transparent
edited Nov 13 '18 at 9:25
Luca Kiebel
7,30841431
asked Nov 13 '18 at 8:34
лолка лолковичлолка лолкович
31
edited Nov 13 '18 at 9:25
Luca Kiebel
7,30841431
asked Nov 13 '18 at 8:34
лолка лолковичлолка лолкович
31
edited Nov 13 '18 at 9:25
Luca Kiebel
7,30841431
edited Nov 13 '18 at 9:25
Luca Kiebel
7,30841431
edited Nov 13 '18 at 9:25
Luca Kiebel
7,30841431
7,30841431
asked Nov 13 '18 at 8:34
лолка лолковичлолка лолкович
31
asked Nov 13 '18 at 8:34
лолка лолковичлолка лолкович
31
asked Nov 13 '18 at 8:34
лолка лолковичлолка лолкович
31
31
4
The actual image is not transparent.
– Jack Bashford
Nov 13 '18 at 8:38
So what background should be to add transparency effect? Can u give a link to actual transparent image then?
– лолка лолкович
Nov 13 '18 at 8:40
no specific background. PNG allows a 4th channel, the alpha channel. So every pixel has a red, green, blue and alpha value (opacity) between 0 and 255 (in case of 8bit PNG). Also see this link, for when to use which image format: stackoverflow.com/q/2336522
– MA-Maddin
Nov 13 '18 at 8:58
add a comment |
4
The actual image is not transparent.
– Jack Bashford
Nov 13 '18 at 8:38
So what background should be to add transparency effect? Can u give a link to actual transparent image then?
– лолка лолкович
Nov 13 '18 at 8:40
no specific background. PNG allows a 4th channel, the alpha channel. So every pixel has a red, green, blue and alpha value (opacity) between 0 and 255 (in case of 8bit PNG). Also see this link, for when to use which image format: stackoverflow.com/q/2336522
– MA-Maddin
Nov 13 '18 at 8:58
4
4
The actual image is not transparent.
– Jack Bashford
Nov 13 '18 at 8:38
The actual image is not transparent.
– Jack Bashford
Nov 13 '18 at 8:38
So what background should be to add transparency effect? Can u give a link to actual transparent image then?
– лолка лолкович
Nov 13 '18 at 8:40
So what background should be to add transparency effect? Can u give a link to actual transparent image then?
– лолка лолкович
Nov 13 '18 at 8:40
no specific background. PNG allows a 4th channel, the alpha channel. So every pixel has a red, green, blue and alpha value (opacity) between 0 and 255 (in case of 8bit PNG). Also see this link, for when to use which image format: stackoverflow.com/q/2336522
– MA-Maddin
Nov 13 '18 at 8:58
no specific background. PNG allows a 4th channel, the alpha channel. So every pixel has a red, green, blue and alpha value (opacity) between 0 and 255 (in case of 8bit PNG). Also see this link, for when to use which image format: stackoverflow.com/q/2336522
– MA-Maddin
Nov 13 '18 at 8:58
add a comment |
2 Answers
2
active
oldest
votes
0
Your code works perfectly - you just need an image with a transparent background - like this question mark:
var can = document.getElementById('canvasId');
var ctx = can.getContext('2d');
ctx.fillRect(50,50,500,500); // something in the background
var img = new Image();
img.onload = function() {
ctx.drawImage(img, 0, 0);
}
img.src = "https://i.stack.imgur.com/RPEQQ.png"; //transparent png<canvas id="canvasId"></canvas>And to prove it's not just got a white background image, I set the background image of the body to red:
var can = document.getElementById('canvasId');
var ctx = can.getContext('2d');
ctx.fillRect(50,50,500,500); // something in the background
var img = new Image();
img.onload = function() {
ctx.drawImage(img, 0, 0);
}
img.src = "https://i.stack.imgur.com/RPEQQ.png"; //transparent pngbody {
background-color: red;
}<canvas id="canvasId"></canvas>answered Nov 13 '18 at 8:45
Jack BashfordJack Bashford
5,79131235
add a comment |
1
The image that you are trying to display isn't transparent, it simply just has a transparent checkered background.
A link to an image which does have a transparent background can be found here
Using this link fixes your issue:
var can = document.getElementById('canvasId');
var ctx = can.getContext('2d');
ctx.fillRect(50, 50, 500, 500); // something in the background
var img = new Image();
img.src = "https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon@2.png?v=73d79a89bded"; //transparent png
img.onload = function() {
ctx.drawImage(img, 0, 0);
}canvas {
border: 1px solid black;
}<canvas id="canvasId" height="300" width="500"></canvas>answered Nov 13 '18 at 8:43
Nick ParsonsNick Parsons
4,8522721
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
});
}
});
draft saved
draft discarded
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%2f53276849%2fdraw-image-with-transparent-background-on-canvas%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
Your code works perfectly - you just need an image with a transparent background - like this question mark:
var can = document.getElementById('canvasId');
var ctx = can.getContext('2d');
ctx.fillRect(50,50,500,500); // something in the background
var img = new Image();
img.onload = function() {
ctx.drawImage(img, 0, 0);
}
img.src = "https://i.stack.imgur.com/RPEQQ.png"; //transparent png<canvas id="canvasId"></canvas>And to prove it's not just got a white background image, I set the background image of the body to red:
var can = document.getElementById('canvasId');
var ctx = can.getContext('2d');
ctx.fillRect(50,50,500,500); // something in the background
var img = new Image();
img.onload = function() {
ctx.drawImage(img, 0, 0);
}
img.src = "https://i.stack.imgur.com/RPEQQ.png"; //transparent pngbody {
background-color: red;
}<canvas id="canvasId"></canvas>answered Nov 13 '18 at 8:45
Jack BashfordJack Bashford
5,79131235
add a comment |
0
Your code works perfectly - you just need an image with a transparent background - like this question mark:
var can = document.getElementById('canvasId');
var ctx = can.getContext('2d');
ctx.fillRect(50,50,500,500); // something in the background
var img = new Image();
img.onload = function() {
ctx.drawImage(img, 0, 0);
}
img.src = "https://i.stack.imgur.com/RPEQQ.png"; //transparent png<canvas id="canvasId"></canvas>And to prove it's not just got a white background image, I set the background image of the body to red:
var can = document.getElementById('canvasId');
var ctx = can.getContext('2d');
ctx.fillRect(50,50,500,500); // something in the background
var img = new Image();
img.onload = function() {
ctx.drawImage(img, 0, 0);
}
img.src = "https://i.stack.imgur.com/RPEQQ.png"; //transparent pngbody {
background-color: red;
}<canvas id="canvasId"></canvas>answered Nov 13 '18 at 8:45
Jack BashfordJack Bashford
5,79131235
add a comment |
0
0
0
Your code works perfectly - you just need an image with a transparent background - like this question mark:
var can = document.getElementById('canvasId');
var ctx = can.getContext('2d');
ctx.fillRect(50,50,500,500); // something in the background
var img = new Image();
img.onload = function() {
ctx.drawImage(img, 0, 0);
}
img.src = "https://i.stack.imgur.com/RPEQQ.png"; //transparent png<canvas id="canvasId"></canvas>And to prove it's not just got a white background image, I set the background image of the body to red:
var can = document.getElementById('canvasId');
var ctx = can.getContext('2d');
ctx.fillRect(50,50,500,500); // something in the background
var img = new Image();
img.onload = function() {
ctx.drawImage(img, 0, 0);
}
img.src = "https://i.stack.imgur.com/RPEQQ.png"; //transparent pngbody {
background-color: red;
}<canvas id="canvasId"></canvas>answered Nov 13 '18 at 8:45
Jack BashfordJack Bashford
5,79131235
Your code works perfectly - you just need an image with a transparent background - like this question mark:
var can = document.getElementById('canvasId');
var ctx = can.getContext('2d');
ctx.fillRect(50,50,500,500); // something in the background
var img = new Image();
img.onload = function() {
ctx.drawImage(img, 0, 0);
}
img.src = "https://i.stack.imgur.com/RPEQQ.png"; //transparent png<canvas id="canvasId"></canvas>And to prove it's not just got a white background image, I set the background image of the body to red:
var can = document.getElementById('canvasId');
var ctx = can.getContext('2d');
ctx.fillRect(50,50,500,500); // something in the background
var img = new Image();
img.onload = function() {
ctx.drawImage(img, 0, 0);
}
img.src = "https://i.stack.imgur.com/RPEQQ.png"; //transparent pngbody {
background-color: red;
}<canvas id="canvasId"></canvas>var can = document.getElementById('canvasId');
var ctx = can.getContext('2d');
ctx.fillRect(50,50,500,500); // something in the background
var img = new Image();
img.onload = function() {
ctx.drawImage(img, 0, 0);
}
img.src = "https://i.stack.imgur.com/RPEQQ.png"; //transparent png<canvas id="canvasId"></canvas>var can = document.getElementById('canvasId');
var ctx = can.getContext('2d');
ctx.fillRect(50,50,500,500); // something in the background
var img = new Image();
img.onload = function() {
ctx.drawImage(img, 0, 0);
}
img.src = "https://i.stack.imgur.com/RPEQQ.png"; //transparent png<canvas id="canvasId"></canvas>var can = document.getElementById('canvasId');
var ctx = can.getContext('2d');
ctx.fillRect(50,50,500,500); // something in the background
var img = new Image();
img.onload = function() {
ctx.drawImage(img, 0, 0);
}
img.src = "https://i.stack.imgur.com/RPEQQ.png"; //transparent pngbody {
background-color: red;
}<canvas id="canvasId"></canvas>var can = document.getElementById('canvasId');
var ctx = can.getContext('2d');
ctx.fillRect(50,50,500,500); // something in the background
var img = new Image();
img.onload = function() {
ctx.drawImage(img, 0, 0);
}
img.src = "https://i.stack.imgur.com/RPEQQ.png"; //transparent pngbody {
background-color: red;
}<canvas id="canvasId"></canvas>answered Nov 13 '18 at 8:45
Jack BashfordJack Bashford
5,79131235
answered Nov 13 '18 at 8:45
Jack BashfordJack Bashford
5,79131235
answered Nov 13 '18 at 8:45
Jack BashfordJack Bashford
5,79131235
answered Nov 13 '18 at 8:45
Jack BashfordJack Bashford
5,79131235
5,79131235
add a comment |
add a comment |
1
The image that you are trying to display isn't transparent, it simply just has a transparent checkered background.
A link to an image which does have a transparent background can be found here
Using this link fixes your issue:
var can = document.getElementById('canvasId');
var ctx = can.getContext('2d');
ctx.fillRect(50, 50, 500, 500); // something in the background
var img = new Image();
img.src = "https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon@2.png?v=73d79a89bded"; //transparent png
img.onload = function() {
ctx.drawImage(img, 0, 0);
}canvas {
border: 1px solid black;
}<canvas id="canvasId" height="300" width="500"></canvas>answered Nov 13 '18 at 8:43
Nick ParsonsNick Parsons
4,8522721
add a comment |
1
The image that you are trying to display isn't transparent, it simply just has a transparent checkered background.
A link to an image which does have a transparent background can be found here
Using this link fixes your issue:
var can = document.getElementById('canvasId');
var ctx = can.getContext('2d');
ctx.fillRect(50, 50, 500, 500); // something in the background
var img = new Image();
img.src = "https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon@2.png?v=73d79a89bded"; //transparent png
img.onload = function() {
ctx.drawImage(img, 0, 0);
}canvas {
border: 1px solid black;
}<canvas id="canvasId" height="300" width="500"></canvas>answered Nov 13 '18 at 8:43
Nick ParsonsNick Parsons
4,8522721
add a comment |
1
1
1
The image that you are trying to display isn't transparent, it simply just has a transparent checkered background.
A link to an image which does have a transparent background can be found here
Using this link fixes your issue:
var can = document.getElementById('canvasId');
var ctx = can.getContext('2d');
ctx.fillRect(50, 50, 500, 500); // something in the background
var img = new Image();
img.src = "https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon@2.png?v=73d79a89bded"; //transparent png
img.onload = function() {
ctx.drawImage(img, 0, 0);
}canvas {
border: 1px solid black;
}<canvas id="canvasId" height="300" width="500"></canvas>answered Nov 13 '18 at 8:43
Nick ParsonsNick Parsons
4,8522721
The image that you are trying to display isn't transparent, it simply just has a transparent checkered background.
A link to an image which does have a transparent background can be found here
Using this link fixes your issue:
var can = document.getElementById('canvasId');
var ctx = can.getContext('2d');
ctx.fillRect(50, 50, 500, 500); // something in the background
var img = new Image();
img.src = "https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon@2.png?v=73d79a89bded"; //transparent png
img.onload = function() {
ctx.drawImage(img, 0, 0);
}canvas {
border: 1px solid black;
}<canvas id="canvasId" height="300" width="500"></canvas>var can = document.getElementById('canvasId');
var ctx = can.getContext('2d');
ctx.fillRect(50, 50, 500, 500); // something in the background
var img = new Image();
img.src = "https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon@2.png?v=73d79a89bded"; //transparent png
img.onload = function() {
ctx.drawImage(img, 0, 0);
}canvas {
border: 1px solid black;
}<canvas id="canvasId" height="300" width="500"></canvas>var can = document.getElementById('canvasId');
var ctx = can.getContext('2d');
ctx.fillRect(50, 50, 500, 500); // something in the background
var img = new Image();
img.src = "https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon@2.png?v=73d79a89bded"; //transparent png
img.onload = function() {
ctx.drawImage(img, 0, 0);
}canvas {
border: 1px solid black;
}<canvas id="canvasId" height="300" width="500"></canvas>answered Nov 13 '18 at 8:43
Nick ParsonsNick Parsons
4,8522721
answered Nov 13 '18 at 8:43
Nick ParsonsNick Parsons
4,8522721
answered Nov 13 '18 at 8:43
Nick ParsonsNick Parsons
4,8522721
answered Nov 13 '18 at 8:43
Nick ParsonsNick Parsons
4,8522721
4,8522721
add a comment |
add a comment |
draft saved
draft discarded
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.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- 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.
draft saved
draft discarded
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%2f53276849%2fdraw-image-with-transparent-background-on-canvas%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
4
The actual image is not transparent.
– Jack Bashford
Nov 13 '18 at 8:38
So what background should be to add transparency effect? Can u give a link to actual transparent image then?
– лолка лолкович
Nov 13 '18 at 8:40
no specific background. PNG allows a 4th channel, the alpha channel. So every pixel has a red, green, blue and alpha value (opacity) between 0 and 255 (in case of 8bit PNG). Also see this link, for when to use which image format: stackoverflow.com/q/2336522
– MA-Maddin
Nov 13 '18 at 8:58