I'm trying to add transparency to my CanvasJS background.
CanvasJS uses backgroundColor in order to choose the color of the background of the canvas.
I tried writing "None" instead of a color code but it's giving me a black background.
Also it would be nice to have the ability to choose different opacities for the background.
To set transparent background you can set backgroundColor: "transparent". And if you like to give transparency to any color you can use rgba color coding, for example: backgroundColor: "rgba(225,150,150,0.5)".
You can set background-color: transparent; and it will show no color.
Opacity can be set by using rgba. For white 50%, it would be background-color: rgba(255, 255, 255, .5);
I've never used CanvasJs and don't know how that script will effect things but in basic CSS these will do the trick.
I found the answer eventually. You can just have the backgroundColor with en empty string (backgroundColor:'') and it will omit the background color and leave it transparent.
I would still like to know if it's possible to add transparency to a color, so if anyone knows, please comment.
According to Canvasjs document you will be able to set background color, use rgba(0, 0, 0, 0) for transparent (of course you can change the inside values to fix your purpose):
window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer",
{
title:{
text: "Title with Background Color",
padding: 5,
backgroundColor: rgba(0, 0, 0, 0),
},
data: [
{
type: "column",
dataPoints: [
{ x: 10, y: 71 },
]
}
]
});
chart.render();
}
Hope this help :)
<br/><!-- Just so that JSFiddle's Result label doesn't overlap the Chart -->
<div id="chartContainer" style="height: 300px; width: 100%;"></div>
Full demo http://jsfiddle.net/canvasjs/7b0xdcwv/
Related
I have an Image that is masked by an image asset. I'd like to apply a dashed border to the Image so that the dashed border shape follows the mask whatever it is.
Image(uiImage: self.helper.loadedImage!)
.resizable()
.scaledToFill()
.foregroundColor(Color.clear)
.background(Color.clear)
.frame(width: 200, height: 200, alignment: .center)
.clipped()
.mask(Image(uiImage: self.helper.loadedMaskImage!)
.resizable()
.frame(width: 200, height: 200, alignment: .center))
This image is rendered correctly. If loadedMaskImage is a circle for example, i see the original image in a circle shape. Now i'd like to show a circle dashed border on this image. But I don't want to use any specific shape, because the loadedMaskImage can be anything at runtime.
Is this possible without diving back into UIKit UIView?
EDIT:
This is how i can mask the view. In this case i'm using a circle image as a mask and the result is correct. Now on top of this i'd like to have a dashed border that has the same shape of that circle.
The dashed border can be achieved by using a dashed stroke of color over the image using a ZStack
Circle()
.stroke(Color.blue, style: StrokeStyle(lineWidth:5 , lineCap: .round, dash:[10, 5]))
.frame(width: 200, height: 200)
The dash argument is an array where here it means for every 10 length of showing the border there should be 5 length of no border which appears as dashed border,
I set the width and height of the frame exactly equal to your image's width and height so that it looks as though the circle is just bordering your image
You can set the first property to anything like Color.black.opacity(0.4) or even a LinearGradient if you wish so...
I have a stencil shape of type basic.Image which is showed in Stencil without a label as in the following screenshot:
Is there any way I can add a label which will be displayed at the bottom of this shape in the Stencil?
The full code is the following:
new joint.shapes.basic.Image({
attrs: {
image: { width: 50, height: 50, 'xlink:href': 'data:image/png;base64,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' },
text: { text: 'image', 'font-size': 9, display: '', stroke: '#000000', 'stroke-width': 0 }
}
})
Thanks to Rappid/ jointJS support, I solved my problem by disabling a CSS rule which was responsible for hiding the label of any Stencil shape of type basic.Image this way:
.stencil .elements .element.basic.Image text
This label is now visible under this shape at Stencil and it is disappeared when adding this shape to the graph, as wanted.
I have added a textareafield to the panel, which by default is white as background. But I wanted to hide the white color and give it the lightblue color, so that it falls in with the panel.As you can see on the image, the top (first line) of the textareafield stays white. Does anyone has an idea of why, and how to solve this?
My code to generate the textareafield is:
xtype: 'textareafield',
readOnly: true,
height: 150,
fieldStyle: 'background-color: #DFE9F6',
value: warning,
id: 'textareaField'
There is still a background image that you will need to remove, too. Please try
xtype: 'textareafield',
readOnly: true,
height: 150,
fieldStyle: 'background-color: #DFE9F6; background-image: none;',
value: warning,
id: 'textareaField'
I'm creating a color picker in HTML5 like the gradient below
It consists of three elements:
A solid red background color (must be changeable)
A black – transparent gradient from bottom to top
A white – transparent gradient from the left to right
I have managed to create a single gradient and a single color, but I can't figure out how to overlay the solid color and two gradients together. How can I accomplish this?
(I could provide my code but it's pretty generic and wouldn't be useful)
You can overlay two gradients on top of each other:
Fiddle demo
Horizontal gradient
Going from white to the color (HUE degree) you want to use with 100% saturation and 50% lightness:
var grH = ctx.createLinearGradient(0, 0, ctx.canvas.width, 0);
grH.addColorStop(0, '#fff');
grH.addColorStop(1, 'hsl(' + hue + ', 100%, 50%)');
ctx.fillStyle = grH;
ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
Vertical
Going from black bottom to transparent at top.
var grV = ctx.createLinearGradient(0, 0, 0, ctx.canvas.height);
grV.addColorStop(0, 'rgba(0,0,0,0)');
grV.addColorStop(1, '#000');
ctx.fillStyle = grV;
ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
Result
Drawing the horizontal first and then the vertical on top will result in this:
As in the demo it's easy to create a slider to update the hue palette. You don't need to re-create the black to transparent gradient as in the demo - just cache it to an off-screen canvas and re-use it for each update as that gives you a bit more performance.
Hope this helps.
I do not think that the color picker would be "correct" using the method you came up with. Because the white-transparent gradient would make the left bottom corner white but it should be black.
I created a jsfiddle based on this answer. It is still tilted but I think you can figure this out yourself:
function draw(hue){
var canvas = document.getElementById("hsl-square");
var ctx = canvas.getContext('2d');
for(row=0; row<=100; row++){
var grad = ctx.createLinearGradient(0, 0, 100,0);
grad.addColorStop(0, 'hsl('+hue+', 0%, '+(row)+'%)');
grad.addColorStop(1, 'hsl('+hue+', 100%, '+(row/2)+'%)');
ctx.fillStyle=grad;
ctx.fillRect(0, row, 100, 1);
console.log(row, row/2);
}
}
draw(64);
There is also a new html5 color input that works in most modern browsers: http://jsfiddle.net/4FMJM/1/
<form>
Select color: <input type="color" name="your-color">
<input type="submit">
</form>
function fader(){
$('#numbers').animate({backgroundColor: '#FFFFFF'}, 900);
}
HTML
<div id="numbers" style="background-color: blue; width:200px;" onclick="fader()">1234567890</div>
The code above changes the background color of the div from blue to white on click event. But it works for the first click only.
How to change the color every time I click on the div?
You need to make it blue again!
function fader()
{
$('#numbers')
.css('background-color', '#FF0000')
.animate({
backgroundColor: '#FFFFFF'
}, 900);
}
Try setting the background-color using a separate CSS style rather than using inline CSS.